I have defined in the code for a link to go to a page, but it is not going anywhere when I click it.
If you go to this page: http://www.davidhechtkitchens.com/ and try to click on "Portfolio" in the top navigation it does nothing. If you look at the code you'll see that it's defined to go to portfolio.html.
This problem only seems to be in effect when there is a sub-menu underneith the top link. If I remove the sub-menu from "Portfolio" it works.
It seems you have some kind of script active that prevents the default action,
While checking the source code, When I click on the button it adds a class to the anchor. (In most cases this is made to make it work on mobile devices)
Simple fix Just add a class of .menu-link to all the links that you want that are not sub menu links. You can use whatever class you want but make sure that class is only on the href's you want to actually use this. Also don't forget to put this AFTER your Jquery include.
<script>
$(".menu-link").on("click", function(){
//get this clicked link
var link = $(this).attr('href');
//go to link clicked
window.location = link;
});
</script>
Related
I use the target selector to put and remove a class that shows and hides the navigation menu. The problem is that when a user uses the backbutton on the browser the menu states get messed up.
This is my css code
<style>
#buttons-container a.close-menu-primary{display: none;}
#wrap:target #mainmenu{display: block;}
#wrap:target #buttons-container a.open-menu-primary{display: none;}
#wrap:target #buttons-container a.close-menu-primary{display: block;}
</style>
buttons-container is a div with two buttons, open-menu-primary & close-menu-primary, that toggle each other on and off and show or hide the mainmenu.
The problem occurs when someone uses the back button. In that case it only toggles the button states between open and close-menu-primary, which are a burger and a close image.
You can check the live version here if you make the browser small enough or use a mobile device, screen size has to be smaller than (min-width: 768px) and (min-height: 558px) website with toggle by target selector
Hope someone can clear this up if it is possible to use target this way or if there better ways to get this affect without scripting please.
Thanks in advance!
The question is... when user presses the back button, do you want to go back one state of menu visibility (ie. hide it or unhide it), or do you want to go back one page?
I check your linked page http://www.rieon.nl. I think this is the problem:
I presume you want the user to go back one page, not just to hide the menu. Then, you need to change this piece of code
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(){
$("nav").toggleClass("main");
});
});
and add either return false or e.preventDefault():
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(e){
$("nav").toggleClass("main");
e.preventDefault(); // use either one
return false; // of these lines
});
});
The problem is that by clicking on the link on navigation button, browser executes the javascript handler that shows the menu AND navigates to link's href address (which is #wrap) and that creates a new step in its history, so that when user hits back button, browser just goes back to previous state (which is usually the same page but without #wrap). By adding return false (that's jQuery speciality) or calling preventDefault() on event object (that's standard JS), you cancel the navigation and leave only your own handler to be executed.
I am using Wordpress and the Underscores starter theme to build a website for a client. The landing page is a one-pager with a navigation menu that slides to the correct section with anchor tags.
The issue is that for the first section the navigation link's "current" class doen't activate until I click the "home" link itself (the page doesn't move, only the class activates) or scroll a bit down. In the html the "home" section seems on the top of the viewport, so it should be activated on landing. Any ideas?
You can add current class when page is loaded
$('.main-menu li:first-child').addClass('current');
Or event check if there is no selected items:
if ($('.main-menu .current').length == 0)
$('.main-menu li:first-child').addClass('current');
You can trigger that with js jquery, somehting like
$('.yourFirstMenuElement').click();
There is probably an answer for this but I have no idea of the terminology I would search for unfortunately!
Basically, there is a button on my Wordpress website at the top right which when clicked, pulls down a form to fill out. What's the easiest way of creating a button further down the page which would open that pulldown and take the user up there, presumably with an anchor? Simple HTML/CSS would be ideal because A: I can create a text box in the page layout creator and just paste the code in there and B: My coding knowledge is quite limited!
The website is www.harringtonsproperty.co.uk. The button in question is the BOOK A VALUATION at the top right.
Thank you!
This cannot be done with CSS alone. You need to use JavaScript.
Currently, the 'click' event is described at the top of the custom.js file. You'll need to add an additional JS function into this file to achieve what you want. For starters/example:
jQuery('button#contactToggle2').click(function(e){
e.preventDefault();
if( jQuery('#contactSlide').css('display') == 'block' ) {
jQuery('#contactSlide').slideUp(500);
} else {
jQuery('#contactSlide').slideDown(500);
// Handle scroll to top
jQuery('html, body').animate({scrollTop : 0},800);
}
})
You'll then need to give your new button an id="contactToggle2" in order for this to work. Again, this is just an example.
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
$('#popupDiv').popup("open");
This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.
You can do:
$('#popupDiv').popup("open", {positionTo: '#mydiv'});
'origin' is not working for me in version 1.2 though.
see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html
Straight from the jQuery Mobile Docs:
Positioning options By default, popups open centered vertically and
horizontally over the thing you clicked (the origin) which is good for
popups used as tooltips or menus. The framework also applies some
basic collision detection rules to ensure that the popup will appear
on-screen so the ultimate position may not always be centered over the
origin.
For situations like a dialog or lightbox where the popup should appear
centered within the window instead of over the origin, add the
data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of
position-to in addition to origin and window. For example, if you add
data-position-to="#myElement" the popup will be positioned over the
element with the id myElement.
<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.
yeah the right way to do this is use event.target like this
$('#popup').off('taphold').on('taphold', function (e) {
$('#popupDiv').popup("open", e.target);
});
incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works
$('#popup').on('tap', function (){
var url = $(this).attr('url');
window.open( url, '_parent');
});
nb: I added "url='google.com'" to the markup and made href='#'