I am using the script below on my wordpress sidebar menu and it works perfectly. However on some of the menu options I want to slide the div AND link to a page. I've worked on this all morning with no success. Can you please tell me what I need to add to this script to make it work? Thank you in advance for your help.
function slideonlyone(thechosenone) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);
} else {
$(this).slideUp(500);
}
}
);
}
The page I am referencing is: http://www.nicksardone.com/slide-down.php
The javascript in the question is a function that when a top level menu item is selected it slides the selected div down to show other links. The question is I want the top level menu option (Human resources) for example to slide the div down AND link to another page on the site. Hope that clarifies...
the question is not clear, what do you mean with "and link to page" ?
EDIT:
if your problem is that clicking on the div it works fine but clicking on the link doesn't work.
you have to call the slideonlyone function on the href property of the link passing as parameter the id of his parent div.
link this:
<a id="someID" href="javascript:slideonlyOne(MyParentDivID)">text</a>
but if you want that it opens another page:
function slideonlyone(thechosenone, url) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);window.open(url);
} else {
$(this).slideUp(500);
}
}
);
}
Related
I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??
You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo
Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.
i have this jquery script that i can't get to work like i want, i want a button that shows all the content at the same time and hides the content at the same time.
When pressing a link, i want all the slides to slide out, and show all the content, and pressing it again will hide it. Is this possible?
I've tried to create a link that run
javascript:slideonlyone('newboxes1')
javascript:slideonlyone('newboxes2')
but it doesn't seem to work.
Fiddle
if ($(this).attr("id") == thechosenone) {
$(this).slideToggle(400);
}
Remove the above if condition, which is preventing to slide both elements.
$('.newboxes2').each(function (index) {
$(this).slideToggle(400);
});
JSFiddle
See http://jsfiddle.net/F48AT/5/ You use
$(this).slideToggle(400);
here the this scope refers to the current clicked item. Since you want all slides to open, you need to use a class common for all slides. In your case this is .newboxes2. Therefore this code opens all slides:
if ($(this).attr("id") == thechosenone) {
$('.newboxes2').slideToggle(400);
}
I want to open an anchor div on my website when a user surfs to a link without the # in the address bar. For example; when a user goes to www.website.com/nameofdiv it has to auto open the div with the same anchor tag name (www.website.com/#nameofdiv)
I use the following script to open and close anchor div's on my website:
function slideonlyone(thechosenone) {
$('.show').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeIn(500);
}
else {
$(this).fadeOut(500);
}
});
}
This is the HTML click event i am using:
link
I tried some stuff with the .htaccess and with the next script but it didnt worked.
window.location.href.replace(/#.*/,'');
I hope I explained it well enough and I hope someone can help me!
If you're calling that code from a click handler, make sure you return false from the click handler, or call event.preventDefault().
I found this topic: How to link directly to an FAQ option expanded and used this script in my website:
$(window).load(function(){
$('.expand_text').each(function() {
$(this).css("display", "none");
});
$('.treenode').click(function() {
$(this).next('.expand_text').slideToggle("fast")
return false;
});
(function(hash){
if (hash !== undefined && hash.substring(0,1) === "#") {
$(hash).slideToggle("fast");
}
})(window.location.hash);
});
So now I can provide a link to a particular page which opens with one of the menu items automatically expanded. For example: http://drgiannopoulos.com/estheticdentistry.html#bleach It is in Greek, but its obvious that you can land on the page with the first menu item expanded. However, if you scroll down a bit you'll notice two three lettered underlined words (sorry again its Greek!). These are links and they don't work! You can right click and select "open in a new tab / window" which will work fine, but the simple left click has been rendered inactive. I think this has to do with the above mentioned script and since I am totally new to all this I would like your help.
Thanks
http://www.spencedesign.netau.net/singaporehomemenu.html
This is the link to my page. When you click on menu it closes, or opens the menu, by bringing you to the other page, that doesn't have the menu. But, on the other page the menu button is not lined up. Even though the code for the button is the same on each page. Could someone tell me what I can do to fix this. Also, I don't know any javascript, so I had to make two pages instead of making the menu button work as an actual button and bring up/close the menu on one page. If anyone knows javascript, and knows a simple way to make the above scenario possible that would be greatly appreciated. Thank you.
You can do it using javascript.
Add this to your < head > tag:
<script type="text/javascript">
function showMenu() {
if (menu.style.display != "none") {
menu.style.display = "none";
}
else {
menu.style.display = "block";
}
}
</script>
And write this in your < body > section:
<div id="menuButton" onclick="showMenu()">Menu
</div>
This ought to do the trick. :)