Search Results

Search found 2 results on 1 pages for 'ussteele'.

Page 1/1 | 1 

  • how to filter selected objects then hide objects not selected.

    - by ussteele
    following up from yesterday... This portion of the code does work. $(document).ready(function(){ $('#listMenu a').click(function (selected) { var getPage = $(this).attr('id'); var getName = $(this).attr('name'); //console.log(getPage); //console.log(getName); $(function() { $("#" + getName ).show(); var getColor = $('#' + getName ).css('background-color'); $('#header' ).css('background', getColor); $('#slideshow' ).css('background', getColor); $('span').css('background', getColor); $('#menuContainer').css('background', getColor); }); $('li.listMenu ul').hide(); }); }); I am able to get what I wanted selected; based on vars getPage and getName, now I need to hide what is not selected. I have tried this: $(function() { var notSelected = $('div').filter(selected).attr('id', 'name'); $(this).hide(); console.log(notSelected); }); placed just above: $('li.listMenu ul').hide(); but it's not correct, remember I am really a newbie. what I see on screen is the new selected items on top of what should be hidden. again any help is appreciated. -sjs

    Read the article

  • reuse div container to load images

    - by user295927
    Hi All; What I would like to do: use a single container to load images. As it is now: I have eleven (11) containers in HTML mark-up each with its own div. each container holds 4 images (2 images side by side top and bottom) when link in anchor tag is clicked div with images fades in. /*-- Jquery accordion is used for navigation typical example is below --*/ <li> <a class="head" href="#">commercial/hospitality</a> <ul> <li><a href="#" projectName="project1" projectType="hospitality1" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 1</a> </li> <li><a href="#" projectName="project2" projectType="hospitality2" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 2</a> </li> <li><a href="#" projectName="project3" projectType="hospitality3" image1="images/testImage1.jpg" image2="images/testImage2.jpg" image3="images/testImage3.jpg" image4="images/testImage4.jpg">hospitality project number 3</a> </li> </ul> </li> Typical <div> container used for image insertion currently there are 11 of them: <div id="hospitality1" class="current"> <div id="image1"><img src="images/testImage.jpg"/></div> <div id="image2"><img src="images/testImage.jpg"/></div> <div id="image3"><img src="images/testImage.jpg"/></div> <div id="image4"><img src="images/testImage.jpg"/></div> </div> Here is the code I am using at this point, it does work, but is there a better way to do this that will only re-use a single div container for loading the images? $(document).ready(function(){ $('#navigation a').click(function (selected) { var projectType = $(this).attr("projectType"); //projectType var projectName = $(this).attr("projectName"); //projectName var image1 = $(this).attr("image1"); //anchor tag for image number 1 var image2 = $(this).attr("image2"); //anchor tag for image number 2 var image3 = $(this).attr("image3"); //anchor tag for image number 3 var image4 = $(this).attr("image4"); //anchor tag for image number 4 console.log(projectType); //returns type of project console.log(projectName); //returns name of project console.log(image1); //returns 1st image console.log(image2); //returns 2nd image console.log(image3); //returns 3rd image console.log(image4); //returns 4th image $(function() { $(".current").hide(); // hides previous selected image $("#" + projectType ).fadeIn("normal").addClass("current"); }); }); As you can, see the mark up getting quite large. Any help is appreciated. ussteele

    Read the article

1