...

View Full Version : javascript to jquery



qaa
07-20-2011, 10:13 AM
Hi,

Can anyone help me on converting this code to jquery:




<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
function showall(id) {
showall.ud=showall.ud||false;
var i=1;
while (document.getElementById(id+i)){
document.getElementById(id+i).style.display=showall.ud?'block':'none';
i++;
}
showall.ud=!showall.ud;
}
</script>

</head>
<body>
<center>
<div id="parentdiv" >
<div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>


thanks

devnull69
07-20-2011, 01:48 PM
var ud = false;
function showonlyone(thechosenone) {
$('.noticecontent').hide();
$('#' + thechosenone).show();
}

function showall() {
if(ud) {
$('.noticecontent').show();
} else {
$('.noticecontent').hide();
}
ud = !ud;
}


HTML:
<center>
<div id="parentdiv" >
<div id="expandall" onmouseup="showall()" >OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>

qaa
07-20-2011, 03:18 PM
id="id1news"
id="id2news"
id="id3news"

if i have this id created dynamicly via server, how can i set the script to this?

devnull69
07-20-2011, 05:47 PM
I don't understand ... id's for what? Can you show the HTML please?

qaa
07-21-2011, 10:16 AM
the problem is:

i give information via sql server and those are the ID's that sql create automatic i need to know if it is possible to use them with the jquery script

devnull69
07-22-2011, 10:07 AM
You can use any id you want as long as they don't start with a numeric character

qaa
07-22-2011, 11:35 AM
thanks :)



how can i change this to jquery


var notic = document.getElementById(thechosenone);
if (notic.style.display == "none") {
notic.style.display = "inline"
}
else {
//if (notic.style.display == "inline") {
notic.style.display = "none"
//}
}



this is working on click a button is possible to when this button is clicked it change to other buttion

devnull69
07-22-2011, 12:01 PM
var myElement = $('#' + thechosenone);
if(myElement.css('display') == "none") {
myElement.css('display', 'inline');
} else {
myElement.css('display', 'none');
}

qaa
07-22-2011, 12:11 PM
how can i show only 1 new at a time?

like if one is open when i click on other the opened is closed

devnull69
07-22-2011, 12:41 PM
You should do that with classes. First of all you give all your elements the same class (let's say "myelements"). You add a class (let's say "active") to the active element and remove it if another element becomes active. In CSS you can set display to "block" or "inline" for the active class and initially to "none" for the elements using style="display:none"

Something in the lines of (jQuery)


$('.myelements').removeClass('active');
$('#' + thechosenone).addClass('active');


You can even react on the active state programmatically


if($('#' + thechosenone).hasClass('active')) {...}

qaa
07-22-2011, 12:45 PM
didn't understand what you mean :S

qaa
07-22-2011, 02:52 PM
how can i show all or hide all?

LearningCoder
07-22-2011, 03:03 PM
CSS:




#idname {display:none;}



jQuery


$('#idname').css('display' : 'none');



Not 100% on the jQuery whether or not .css should be .attr, but when I've done it before i've used .css

Hope this is of some help to you! :thumbsup:

qaa
07-22-2011, 05:50 PM
how can i change image like:

image click show hiden div and then change image

LearningCoder
07-22-2011, 06:34 PM
Can you print screen it, I don't understand what you mean.

qaa
07-25-2011, 12:59 PM
img1 is when divs are closed.

img2 is when 1 div is open.

the arrows are images and div open and close by clicking on it

nanda.t
07-26-2011, 10:53 AM
Use hasClass, removeClass and addClass methods to change the class attribute in the div tag's click event.

[example]
<!-- CSS -->
.open
{
background-image: url('images/open.gif');
}

.close
{
background-image: url('images/close.gif');
}

<!-- Script -->
$('#test_change').click(function() {
if ('#test_change').hasClass('open') {
('#test_change').removeClass('open');
('#test_change').addClass('close');
}
if ('#test_change').hasClass('close') {
('#test_change').removeClass('close');
('#test_change').addClass('open');
}
});

<!-- html -->
<div id='test_change' class='open'></div>


hopes it be might useful for you.
Still you need working example, let me know.

qaa
07-26-2011, 12:34 PM
can you give me a working example please

nanda.t
07-26-2011, 02:30 PM
This'll be helpful, still problem persists let me know

qaa
07-26-2011, 04:26 PM
on sql i set 2 divs but i got only 1 page to control both divs

and what happens is when i click on open all (red one on image) it open greens and is the blue one that should open the greens not red.

any help with this?

qaa
07-26-2011, 04:26 PM
This'll be helpful, still problem persists let me know

will give a try thanks :)

nanda.t
07-27-2011, 01:39 PM
I think, you're looking for accordion (nested one).
See the link http://www.adipalaz.com/experiments/jquery/nested_accordion.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum