Expand and collapse menu, without taking user to top of the page - javascript

I have an image button, and I am using JavaScript to EXPAND and COLLAPSE a menu (by toggling between a class that has display: none). The toggle works fine (see the code below). However, whenever I click the button, it takes the user back to the very top of the page. I just want the "click" to expand and collapse the menu and keep the user at the location they currently are. How can I achieve this?
<script type="text/javascript">
function changeClass()
{
$('div#mainmenu_wrap').toggleClass('hidemenu');
}
</script>
<a href="#" onclick="changeClass()">
<img src="images/menu_icon2.png" width="33" height="33" />
</a>

change this line <a href="#" onclick="changeClass()">
to this: <a href="#" onclick="changeClass(e)">
and change the structure of your changeClass() function to below and add the given line:
function changeClass(event){
event.preventDefault();
.
.
.
}

Got it working...
Got rid of the href, and used a button tag instead. That worked.
<button onclick="changeClass()" class="menuIco">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/menu_icon2.png" width="33" height="33" />
</button>

Related

Bootstrap toggle element and JavaScript

I have and element that should be displayed or hidden from different menu entries (e.g. its visibility toggled), and a toggle button that should switch the visibility of the element, but there are menu locations the element should be visible regardless of the toggle button state.
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu surcarte" id="menu">
<div class="dansmenu">
some nice stuff comes here
</div>
</div>
HTML above is OK. But if add this code in a top menu bar :
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 1 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 2 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 3 </a>
Each link will toggle the #menu element, first showing it, then hiding it and so and. But i want them to allways show the #menu element. Only the element with the "bars" class should act as a toggler.
I tryed to solve it with $("#menu").show();
but the jquery command seams not working.
Then i tryed the following to find out what happened:
click the link of class "menu-bar" to make the div appearing.
use the command $("#menu").hide(); => WORKS
click the link of class "menu-bar" to make the div disapear : DOES NOT WORK ANYMORE
click the link of class "menu-bar" to toggle the div once more : no effect
use the $("#menu").show(); => WORKS again
click the link of class "menu-bar" to make the div disapear : WORKS
use the $("#menu").show(); => DOSN'T work anymore.
It seems that there is a double imbricated toggle command and i can't escape it.
How do i write a working $("#menu").show(); ?
I finally found out my problem.
I was trying this :
$("#menu").toggle()
where the right syntax was :
$("#menu").collapse('toggle')
Special thanks to Rory McCrossan who showed me the strating point.

JS menu stops working when navigating to a different page

I'm having some issues with my JS menu. When the page loads the menu work great, and as expected. You click the option, then it displays the menu items.
However, once I click one of the menu items and navigate to a different page the menu stops working! When you click on the icon, the menu no longer appears. The page just sits there. When i look try debug in chrome it no longer "hits" the code.
I have noticed that if i refresh that page, the menu works again as expected :/
My JS code is below, what am I missing for this kind of issue to arise?
I have created a pen for this - http://codepen.io/alr3id/pen/bwdKxL
function MyMenus(jQuery) {
$(".p-menu-icon").on("click", function(event) {
var e = $(this).next(".p-menu");
e.hasClass("p-menu_open") || $(document).trigger("click"),
$(".p-modal-bg").toggleClass("p-modal-bg_active"),
e.toggleClass("p-menu_open"),
event.stopPropagation()
});
// Removes the menu open class.
$(document).on("click", function(t) {
var e = $(t.target)
, i = 1 === e.closest("p-menu").length;
i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"),
$(".p-modal-bg").removeClass("p-modal-bg_active"))
});
}
// Load
$(document).ready(MyMenus);
Below is the HTML for the Menu
<nav class="p">
<div class="p-modal-bg"></div>
<div class="p-property">
<a class="p-property-name" href="/">
Logo Here
</a>
</div>
<div class="p-user">
<a class="p-menu-icon">
<div class="icon icon-navigator-toggle"></div>
</a>
<div class="p-menu p-menu_navigator">
<a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a>
<a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a>
<a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a>
</div>
<a class="p-menu-icon p-menu-icon_account">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="{image here}">
</div>
</a>
<div class="p-menu p-menu_account">
<div class="p-menu-item_account-details">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}">
</div>
<div class="p-account-details-name">
Example User
</div>
<div class="p-account-details-email">example#example.com</div>
</div>
<a class="p-menu-item p-menu-item_settings" href="account">Account settings</a>
<a class="p-menu-item p-menu-item_messages" href="#">Messages</a>
<a class="p-menu-item p-menu-item_logout" href="#">Sign out</a>
</div>
</div>
</nav>
Well, this is something I didn't even consider, it turns out this issue is down to Rails and Turbolinks!
Due to the way Turbolinks loads pages it screws up
$(document).ready
to fix this you need to use...
$(document).on "turbolinks:load"
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
Have you imported the JS file you are using in this page (new page where it stuck) too ? Try adding the code on another file also or move your js code to another js file and import it on that page.
Since it works at freshly loaded page the code itself shouldn't be a problem.
What comes to mind are class changes. Open up your browser's inspector and check if there are any class name changes that would resolve in loosing a listener.
Also try putting some console.log() inside each function so you are sure that both events aren't getting fired one after another.

Layerslider and usijng hyper link to a popup

I am using layerslider plugin to show rotating sliders on my homepage and those sliders are working as hyperlinks, one of the hyperlinks should go to a pop up menu, but it seems class="ls-link" is the only class I can use, and the Jquery pop has it is own class="open-popup-link", how can make the layerslider show that pop up when the user clicks on the slider?
How I can do that?
Layerslider code + standard slider hyperlink
<div class="ls-slide" data-ls="slidedelay:8000 ; transition2d:5;timeshift:0;">
<img src="/img/Slide1.png" class="ls-bg" alt="Slide background"/>
<a href="/users/login" class="ls-link" </a>
</div>
</div>
</a>
Regular html Hyperlink for pop up:
<a href="/users/register" id="register-link" class="open-popup-link" >Login</a>
Add class in it like class="ls-link open-popup-link".
Click

Change fancybox close button within html for one page scroll site

I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.
Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">

Make image link open in new window in php file

Hi I have a website that has a banner that i want to link to another website of mine, but I want it to open in a new window. I also want the cursor to be a hand in all browsers as well. I tried the target = "_blank" method but I don't believe that is right. How can I do this in PHP?
here is the code
I know there are some answers similar to this question but none have solved my problem
<div class="banner-part" onclick="location.href='www.blabla.org/' target="_blank";" style="cursor: pointer;" style="cursor: hand;"><img src="<?php bloginfo('url') ?>/images/banner.png" alt="" /></div>
You're making a bit of a mess there. You're forcing a <div> to act like an <a>, when you could achieve the same thing with a sprinkle of CSS:
<a href="http://www.blabla.org" target="_blank" class="banner-part">
<img src="<?php bloginfo('url') ?>/images/banner.png" alt="" />
</a>
And make the <a> a block element through CSS, without needing to put a block element (<div>) inside an inline element (<a>), which is invalid html in doctypes apart from HTML5 (though the browsers won't complain much)
a.banner-part {
display:block;
}
<div class="banner-part"><img src="<?php bloginfo('url') ?>/images/banner.png" alt="" /></div>
Use the div inside the a tag
target is not a valid property for div element. Try this:
<a href="YOUR_PATH_HERE" target="_blank">
<div class="banner-part">
<img src="<?php bloginfo('url') ?>/images/banner.png" alt="" />
</div>
</a>
Your HTML is broken:
<div [...snip...] /></a>
^^^------------------^
You open a div tag, then close an a

Categories