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.
Related
So I'm webmastering this page full of ebulletins and ppl are asking options to sort different bulletins by their importance. So I created this nice little JQuery thingy:
$(document).ready(function() {
$("#show_all").click(function() {
localStorage.setItem("show","all");
$("div#tiedotteet_infonet div").css("display","block");
});
});
So the div element which display value I'm changing is none in css and I'm using JQuery to switch it to block but I also wan't to store this click into localStorage to key-value-pair "show" and "all", so I can make code to check which is the users preference when she comes back to the page. The button and similarly constructed buttons work fine in the way that they are showing or hiding the div elements (and the bulletins inside them) when the user is clicking different buttons. But the code won't store anything to localStorage according to Chrome. I'm obviously doing something wrong here. What that might be?
Say I have two different functionalities/filters (e.g. calculation and sorting) in form of plugins for a table. The user can choose which one he wants to use right now. But both together have conflicts and therefore when one is chosen, the other should be stopped/removed (without reloading the table itself). How can I achieve that?
For example I use the dataTable jQuery plugin which is initialized by
$('#myTable').dataTable();
But when the user chooses a different filter, I somehow need to 'deactivate' this plugin for the other filter to work without conflict. I tried the unbind event handler, but without success.
In general the logic would look like this:
$('.js_trigger').on('click', '.calculation' function() {
//Deactivate
$('#myTable').dataTable();
//Activate
$('#myTable').dataCalculation();
}
$('.js_trigger').on('click', '.sorting' function() {
//Deactivate
$('#myTable').dataCalculation();
//Activate
$('#myTable').dataTable();
}
I hope you get what I mean and that this question is not to broad.
Solution:
With the hint of #V31, I made use of the empty() function.
1.) On page load I put all the content from the table in a variable before any additional scripts change the table.
tableContent = $('#myTableContainer').html();
2.) When a different plugin needs to be loaded I empty the container and add the content of the variable before I execute the plugin.
$('#myTableContainer').empty();
$('#myTableContainer').html(tableContent);
$('#myTable').dataTable();
You can empty the parent div (of that element) so that the binding is removed. Something like this:
$('#myTable').empty();
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();
});
I have a context menu with 4 option, I want to hide or disable 1 option after clicking it. these are my script fragments. After I click the save option, whenever I right click again on the div I want only the Move option available in the context menu. drag is the div class. is it possible?
var menu = [
{'Move':function(menuItem,menuObject){
$(this).css({'backgroundColor':'red'});
return true;
}
},
{'Save':function(menuItem,menuObject){
$(this).css({'backgroundColor':'blue'});
return true;
}
}
];
$(function() {
$('.drag').contextMenu(menu,{
showSpeed:500,
hideSpeed:500,
showTransition:'fadeIn',
hideTransition:'fadeOut'
});
});
Thanks in advance
First of all the class drag is the class of the parent element.
So you have to find the class of the "save" element. Lets suppose the class is .save, then on click remove it. This is done with this code:
$(".save").click(function{
$(this).remove();
})
If you right click again, the element will be created again and the above function loses its purpose. So as I can see it, this is your problem.
But why do you need to hide the save button after something is "saved"? Maybe the user wants to save again.
It would be helpful if we could see a demo in order to understand the app you are trying to implement.
If you try to apply a rule only on changed (dragged) element you have to flag the changed ones in the class or in your db which holds the positions of the elements.
Then you can manipulate only the flagged (changed) through the jquery selector.
if ((.drag).hasClass('.changed')){
$(".save").css({"visibility: visible"});
}
Dont forget to hide by default the element in css
.save{visibility: none}
I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.