Develop Reference

jQuery Dropdown that stays open after site-change – help a newbie

I need a jQuery dropdown that stays open after a submenu-item was clicked and the user is forwarded to the subpage.
I'm toggling my dropdown with this code and I guess I need to add a class to the ul.submenu and toggle the visibility of this with CSS?
http://jsfiddle.net/erL8Lc0s/9/
$(function () {
// Dropdown toggle
$('.dropdown-toggle a').click(function () {
$(this).next('.sub-menu').toggle();
});
$(document).click(function (e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle a') && !$(target).parents().is('.dropdown-toggle a')) {
$('.sub-menu').hide();
}
});
});
Unfortunately I'm a jQuery-noob and I can't get my head around this problem

There are a few ways to achieve this, however it's unlikely you'll get a straight-forward answer here, and here's why:
What you're trying to do is show an element, depending on what page the user is currently viewing. There are a few ways to achieve this, but which one depends on the specific circumstances of the problem. Here are a few ways:
You've stated you're using WordPress. Great, WordPress makes the page ID visible, so within your theme you could easily add an override class to the element (such as class="show") depending on the page ID. However, this means you'll have to keep a list of page IDs up-to-date.
Moving on from the above, you could use PHP to grab the current URI, and show the correct element based on that.
Just use WordPress's default menus. You can amend the markup with a navigation crawler. It looks like you're using Bootstrap, so there's a premade one available. Now WordPress will automagically add active classes to the nav elements if you're on that page. You can then use CSS to keep those elements open.

Dynamic content changer

I want to create this:
Multi Image Change
If you click on the Color picker Tumbnail("Farbe:"), other Pic will appear in the
"pvImagesContent" section. I tried this on my self:
http://m4terialrmk.bplaced.net/list%20zoomer/demo.html
So far so good but now I cant figure out how to go on? I tried to put the several list zoom control in a div and make one appear and another disappear, but it broke my functionality.
Or must I just change the image path with help of Javascript? If so, I just want to change a section of the img path.
img/red/pic-1.jpg >>will be>> img/blue/pic-1.jpg

You can use the jQuery
$(function() {
$('img').each(function() {
if($(this).attr('src').indexOf('/red/')) ($(this).attr('src')).replace("/red/","/blue/");
});
});

How to Auto Scroll to Listview Item

my question is simple. What i want to do is click on a hyperlink (item2 as diagram below), and my page will automatically scroll into (item2 content at the right side). Usually what we do is we set an id to the section, and put <#id> on the hyperlink it will have the scrolling feature. How about if the right hand side content is created as listviewitem?
something like this: http://html5up.net/prologue

On click of item2, set the focus to Item2 from listview.

Actually the question is not cleared.So it may help you..like Put the listview items in a panel.And add a style to panel.. overflow:scroll;
In css you can also apply this.

scrolling page to a particular panel using jsf and javascript

I have an xhtml page with a set of panels stacked one above the other. Each panel has a datatable with a particular column as a hyperlink. When I click on the hyperlink in the first data table, the second datatable is rendered. When I click on the hyperlink in the second datatable, the third datatable is rendered. I wanted my page to scroll down and display the newly rendered datatable in the center of the screen and not load the page back to the top of the screen. How can I achieve it. below is the code that I have written to achieve that, but with no luck.
Each of the hyperlink in the table has the following code written,
<p:commandLink value="#{abc}" action="#{myBean.myFunction}"
ajax="false" oncomplete="focusPanel3()">
<f:setPropertyActionListener
target="#{myBean.xyz}" value="#{abc}">
</f:setPropertyActionListener>
</p:commandLink>
The javascript is as follows
function focusPanel3() {
var el = document.getElementById("panel3");
el.scrollIntoView();
window.scroll(0, 1200); //Also tried this line. No luck even then
}
In my Bean, i am setting the rendered attribute of the next panel to true.

You can check jQuery smooth scroll out, this answer can guide you. Or jQuery scrollTo plugin and this answer includes a basic demo as well. Do not forget giving the correct HTML generated cliend ID when you are using document.getElementById.

After button clicked, change to different page and show hidden content

I have some "Learn More" links on my Home page, all of which correspond to different sections of content that is on the More Info page. These different sections of content are all hidden using display: none.
What I'm wondering is if there's a way to make it so that when I click a particular "Learn More" link, the user will be sent to the More Info page, and the section of content corresponding to the Learn More link they clicked will be shown.
I can't think of a way to achieve this, but I'm hoping it will be possible, perhaps using JavaScript.
EDIT:
The code I currently have is nothing special. Four <a> links on the Home page, then on the More Info page, four divs that are all initially hidden using display: none.

The solution ended up being fairly simple, I did what is described in the top answer of this question: Getting URL hash location, and using it in jQuery

Learn more
<script>
function showContent(id) {
$("#"+id).show();
}
</script>

I think it is possible.You can take the information on a div,and then you click "Learn more",show the div.
In this way,you even needn't a hyperlink,just a click event,like the code upstairs.Of course,this div was hidden before.

One way you can achieve this would be to add a hash to that link with the id of the section you want to show, like this: Learn More. Then just check for it in window.location.hash on the /moreinfo page and show the div.

You have to do it this way: try to use named anchors.
first:
Learn More
when use clicks this link user will navigate to particular page with different sections.
second:
on this page suppose you want to show the 3rd section:
.....
<a name='section-3'></a>
<h1>Your section-3</h1>
In your case divs are hidden then use js or jQuery for this:
As you will get a hash in the location url then use .substr()' and.indexOf()` javascript methods.
try to put this script on those page where you are having your hidden divs
$(function(){
var url = window.location.href;
var obj = url.substr(url.indexOf('#'));
$(obj).show();
});