Welcome to WeightLossChat.org!   

Advertisments:




Javascript: How would I get my javascript to get the order of my div's, and then update that order ....?

Javascript: How would I get my javascript to get the order of my div's, and then update that order ....?

Postby timeus » Sat Oct 15, 2011 4:26 pm

...when I move them?

in hopes of trying to figure out how to make a javascript cookie... I first need to figure out how to get javascript to save the order of my divs (Then comes getting them to load the page with them in a given order... but first things first unless you really know off the top of your head)

SO, HOW do I get javascript to give me the order and UPDATE it when the order has changed?

Please include code because saying "oh just do this" doesn't help, i'm a BEGINNER at everything but html/css!!!!!

TONS OF THANKS
(code below)



(i'm giving as much info as I can, which involves code, so it may look like alot, but it really isn't that much)
--------------------------------------…

------------Right now, I have this at the BOTTOM of my page:
<script type="text/javascript">
var elements = document.getElementsByClassName("test");
var id = '';
for(var i=0; i<elements.length; i++) {
id += elements[i].id;
}
document.write(id);
</script>

--------------(PRINTS out div1div2div3div4)


---------I have JQuery controling the order of them. Click the up arrow, the div swaps places with the one on top. Down arrow, switches places with one below.
JQuery CODE:
<script>
$().ready(function() {
$('.moveUpCls').click(function(event…
var current = $(this).parent().parent().parent();
current.prev().before(current);
});
$('.moveDownCls').click(function(){
var current = $(this).parent().parent().parent();
current.next().after(current);
});
});
</script>


----------Each div is formatted following this pattern
<div id="div1" class="test">
<div id="tabHeader">

<div id="headMoveUp"><a class="moveUpCls"><img src="images/uparrow.png"></a></div>
<div id="headMoveDown"><a class="moveDownCls"><img src="images/downarrow.png"></a></div>
<a href="javascript:toggle();"><div id="tabHeadText">Important Links »</div> </a>

</div>
<div id="toggleText" style="display:none; text-align:center;">
<div id="empGuide" style="text-align:center;margin-left:aut… margin-right:auto;">
CONTENT

</div>
</div>



</div>



------------IN SHORT, the area of my page in question is:
<div id="body">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
timeus
 
Posts: 691
Joined: Mon Oct 03, 2011 5:41 pm

Javascript: How would I get my javascript to get the order of my div's, and then update that order ....?

Postby beinean » Sat Oct 15, 2011 4:42 pm

...when I move them?

in hopes of trying to figure out how to make a javascript cookie... I first need to figure out how to get javascript to save the order of my divs (Then comes getting them to load the page with them in a given order... but first things first unless you really know off the top of your head)

SO, HOW do I get javascript to give me the order and UPDATE it when the order has changed?

Please include code because saying "oh just do this" doesn't help, i'm a BEGINNER at everything but html/css!!!!!

TONS OF THANKS
(code below)



(i'm giving as much info as I can, which involves code, so it may look like alot, but it really isn't that much)
--------------------------------------…

------------Right now, I have this at the BOTTOM of my page:
<script type="text/javascript">
var elements = document.getElementsByClassName("test");
var id = '';
for(var i=0; i<elements.length; i++) {
id += elements[i].id;
}
document.write(id);
</script>

--------------(PRINTS out div1div2div3div4)


---------I have JQuery controling the order of them. Click the up arrow, the div swaps places with the one on top. Down arrow, switches places with one below.
JQuery CODE:
<script>
$().ready(function() {
$('.moveUpCls').click(function(event…
var current = $(this).parent().parent().parent();
current.prev().before(current);
});
$('.moveDownCls').click(function(){
var current = $(this).parent().parent().parent();
current.next().after(current);
});
});
</script>


----------Each div is formatted following this pattern
<div id="div1" class="test">
<div id="tabHeader">

<div id="headMoveUp"><a class="moveUpCls"><img src="images/uparrow.png"></a></div>
<div id="headMoveDown"><a class="moveDownCls"><img src="images/downarrow.png"></a></div>
<a href="javascript:toggle();"><div id="tabHeadText">Important Links »</div> </a>

</div>
<div id="toggleText" style="display:none; text-align:center;">
<div id="empGuide" style="text-align:center;margin-left:aut… margin-right:auto;">
CONTENT

</div>
</div>



</div>



------------IN SHORT, the area of my page in question is:
<div id="body">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
If you're using jQuery, will you be okay with this example -- http://jsfiddle.net/8ePtm/

What exactly do you want it to do when the order is updated??

If, in my example, this is not what you want to happen. Please email me. I'll go over it with you.
beinean
 
Posts: 647
Joined: Tue Oct 04, 2011 3:56 am


Return to Body Image and Self Esteem

cron