I'm trying to create a page that compares two products side-by-side. So far, I have a single-post page for each individual product. On that single-post page is a set of links that allow the user to select a different product to compare it to.
On the comparison page, I was able to figure out how to toggle the first div that pulls the information from the original post, but how do I toggle the second div too?
Here's the code I have on the single-post page (I used Jquery show/hide in another page as a reference):
<ul class="linkList">
<li>Product 1</li>
<li>Product 2</li>
</ul>
Here's the code I have on the comparison page:
<ul class="linkList">
<li>Product 1</li>
<li>Product 2</li>
</ul>
<div id="product1" class="switch">Product 1</div>
<div id="product2" class="switch">Product 2</div>
My JS:
$(function() {
var anc = window.location.href.split('#')[1];
$('#' + anc + '.switch').show();
$('a.panlink').click(function() {
$('.switch').hide();
$($(this).attr('href')).show();
});
});
and my CSS:
.switch { display: none; }
I've searched high and low, and I can't seem to find an answer for this - only answers from toggling one div.
Let me know if you need clarification - thanks! :)
Here is one approach that may benefit you.
If you every want to compare any of your relative web pages into your current page, use jQuery's AJAX process within an .on('click', 'class-of-product', function() {}); approach to pull data onto your current page. You may need to also use the filter() method to reduce the amount of set elements you are pulling from your product pages.
Related
Basically I have two sets of elements. for example:
<ul id="feature1">
<li class="items" id="item1">Item 1</li>
<li class="items" id="item2">Item 2</li>
<li class="items" id="item3">Item 3</li>
<ul>
<ul id="feature2">
<li class="post" id="item1-post">Post 1</li>
<li class="post" id="item2-post">Post 2</li>
<li class="post" id="item3-post">Post 3</li>
<ul>
What I'm attempting to do here is fairly simple: When the user hovers over an element from #feature1, I show (and then hide on mouseout) the corresponding element in #feature2. I could write functions for each .items element and it's corresponding .post element but I'm thinking it should be possible, with the right naming scheme, to write this as a single function by first getting the id of the hovered on .items element, then applying the show/hide (or adding class, whatever) by looking for the right .post element with the saved ID variable + "-post".
To simplify: I mouse over li#item1 - jQuery saves #item1 as my variable, and then looks for a child of #feature2 with the id of item1 + "-post", showing the given element, and then hiding it on mouseout.
I've come very close, but can never seem to figure out the right logic.
If this is doable, the second aspect I'm looking to accomplish is an additional onclick that keeps the corresponding #feature2 element displayed until mouseover of the next element.
Thanks ahead of time for the help, I've been banging my head against this one all afternoon.
I'd suggest, albeit untested:
$('#feature1 li.items').hover(function(){
$('#' + this.id + '-post').show();
}, function(){
$('#' + this.id + '-post').hide();
});
Or:
$('#feature1 li.items').hover(function(){
$('li.post').eq($(this).index()).show();
}, function(){
$('li.post').eq($(this).index()).hide();
});
References:
eq().
hide().
hover().
index().
show().
Possible Without naming scheme using corresponding indexes
var $feature2 = $('#feature2'),
$hoveredElm;
$('#feature1 li').hover(function() {
var idx = $(this).index();
$hoveredElm = $feature2.find('li').eq(idx).show();
}, function(){
$hoveredElm.hide();
});
I am having very specific case where I needed to split the data into two different lists in html. Like this:
<ul id="first_list">
<li ref="1">The quick brown</li>
<li ref="2">My father works</li>
</ul>
And the second list is like:
<ul id="second_list">
<li ref="1">jumps over the lazy dog</li>
<li ref="2">at the Ministry of Defense</li>
</ul>
So as you can see I from the "ref" attribute I know which <li> element from the second list is a continuation of which <li> element from the fist list.
Now I need to enable the jQuery UI sortable() to those lists but when I reorder the first I need the second reordered too. I tried using handle but it doesn't works because it looks like the handle element needs to be inside the element which is moved but these two are at a different places in the page.
I do believe that you should have shared some of your code (what you've tried), and I'm assuming you are familiar with Sortable plugin that you are using. You should run the below code on success event of Sortable so as soon as you sort any LI, the other list will be sorted too. Anyways,
Try this:
//This line stored the LIs in a temp variable and remove it
var $cachedList = $('<div />').html($('#second_list').html());
$('#second_list > li').remove();
//This line loads up the first UL's LIs and replaces the content for each LI
//using $cachedList.
$('#second_list').html($('#first_list').html()).find('li').each(function () {
$(this).html($cachedList.find('li[ref="'+$(this).attr('ref')+'"]').html());
});
Demo: http://jsfiddle.net/AR8px/
I have a site that's CMS has very limited menu control. As such I'm trying to work around these problems with jQuery to display the menu how I want. I know it will still be in the HTML but as long as it's displaying the way I want it will be fine (at least for my standards).
The menu in question currently looks something like this.
<div id="sidemenu">
<ul>
<li class="childlist">
GET RID OF THIS PARENT
<ul>
<li>Show this</li>
<li>Show this</li>
<li>Show this</li>
</ul>
</li>
</ul>
</div>
I have achieved what I want with the simple $('a:contains(GET RID OF THIS PARENT)').hide(); however the menu is being pulled into two locations and I only want to hide the one in the sidemenu div.
I have tried this approach:
$side = $('#sidemenu');
$hidethis = $('$side:contains('GET RID OF THIS PARENT')');
$hidethis.hide();
But this crashes the page (I've been playing around in the console in Chrome to try to get a solution)
I will be the first to admit my javascript is terrible so any assistance would be well received.
Thanks in advance.
Your code should look like...
$side = $('#sidemenu');
$hidethis = $side.find(':contains('GET RID OF THIS PARENT')');
$hidethis.hide();
try this:
jQuery("#slidemenu").find("a:contains('GIT RID OF THIS PARENT')").hide();
Find First instance...
jQuery("#slidemenu > .childlist:first").find("a:contains('GIT RID OF THIS PARENT')").hide();
Looping through all the children:
jQuery("#slidemenu").find(".childlist").each(function() {
var $childListBranch = jQuery(this);
$childListBranch.find("a:contains('GIT RID OF THIS PARENT')").hide();
});
You need to target what you want to hide. For instance if you want to hide a link which has "get rid of this parent" text you can target a:contains. If you want to hide its parent you need to target #sidemenu:contains to its parent. here is the code example
//Hide a link
$("a:contains('GET RID OF THIS PARENT')").hide();
//Hide its parent
$("#sidemenu:contains('GET RID OF THIS PARENT')").hide();
Jsfiddle Demo
I have built a simple dropdown list which I populate with various links. It contains about 50 items, so I wrapped it in a div to make it scrollable. Problem is, when I mouseout, I lose the whole list, unless the first two list elelments are showing. I have constructed this dropdown as a submenu, with the first two links as the 'container' of sorts.
I somewhat understand why I am losing the entire list, but can't figure out how to make the top links reapear on mouseout.
$('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() {
$('.myMenu').css('overflow','auto');
$('.myMenu').css('height','400px');
$('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
$('.myMenu').css('overflow','hidden');
$('.myMenu').css('height','20px');
$('.ulMenu').css('visibility', 'hidden');
}
}
</script>
<div id="menu">
<ul class="myMenu">
<li id="li_left"> Application </li>
<li id="li"> Hover For Listing
<ul id="tasksUl" class="ulMenu">
</ul>
</li>
</ul>
</div>
I think you also have to post your .css for the list. I think you got a menu and you wanna open a list on hovering <li id="li"> Hover For Listing
You are setting a
$('.myMenu').css('height','20px');
and I don't get why you would do that. Also your .css styles are pretty much deprecated.
Check the fiddle here: http://jsfiddle.net/eR2y9/1/
Works like a charm. There is no need for you to add a height for the menu because it's dynamically adjusting depending on the amount of entries inside. Also if set to display none it's not taking any space away.. If you have further questions or if I misunderstood your problem feel free to reply to my post and I will find a solution for ya.
How can i change the color of a link after it has been selected, so that It will remain the new color, but only until another link is selected, and then it will change back.I'm a beginner.
I found this link Changing the color of a selected link that is embedded in a table
But It makes my links stop working.... They change color, but dont lonk to anything, and then when I remove the script, they work fine. What am i doing wrong/what do i have to change to make this work??
Thanks you!
Son.
If you want to use this to show the user which sub-page on your site he/she is on, you have to use some sort of serverside-coding (Examples: PHP, ASP, ASP.NET, Python, Ruby or similar) to assign a specific class to the element corresponding with the current page.
The reason for this is, that Javascript cannot be stored between different page loads, so when the link is clicked and changed with Javascript, this will be reset when the new page (that you just requested) is loaded.
If your site consists of just a few flat HTML-pages, you're best off by adding the classes to the correct menu items manually.
Example of how you can arrange your menu:
page1.html
<ul id="menu">
<li>Menuitem 1</li>
<li>Menuitem 2</li>
<li>Menuitem 3</li>
<li>Menuitem 4</li>
</ul>
page2.html
<ul id="menu">
<li>Menuitem 1</li>
<li>Menuitem 2</li>
<li>Menuitem 3</li>
<li>Menuitem 4</li>
</ul>
Note the position of class="activeSection" - this is what decides where the CSS is applied that changes the look of the selected page.
You could remove the "return false" from the accepted answer in the post you have linked to. By having "return false" there, the default action of the link is prevented from happening.
I have also posted a modified version of the code from the original post and accepted solution to avoid looping over all the links in the document.
<head>
<script>
var selectedEl;
document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
// Change the last selected element to unselected
selectedEl.className = 'unselected';
// Change the selected element to the current element
selectedEl = el;
// Change the classname of the selected element to 'selected'
selectedEl.className = 'selected';
}
}
</script>
<style>
.selected { background: #f00; }
</style>
</head>
<body>
One
Two
Three
</body>
$("a.selector").click(function()
{
$("a.focused").removeClass('focused');
$(this).addClass('focused');
// do other click event stuff...
return false;
});
Using the jQuery Javascript plugin you should be able to use the following code to achieve the desired effect:
$("a").click(function()
{
$("a.clicked").removeClass("clicked")
$(this).addClass("clicked");
}
You can always use the psuedo class :visited, so you can style a link that has been clicked on.