Bit of a weird one - On just one page of a site I've been working, certain html links are not working - the hrefs are relative and are definitely the right links however when you click on them you are not taken away from the current page
http://www.luxury-spa-breaks.com/spas/celtic-manor/spa-days
You'll see that there's only a handful of links that work - all the top nav doesn't, as well as most of the left hand side nav.
This wasn't built using word press, joomla etc. This happens across browsers too.
Your help would be massively appreciated.
It looks like the problem is in a jQuery plugin, specifically jquery.tabs.js:
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active')){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn(2000);
}
return false;
});
Note at the end of that function that it returns false. You're basically having JS prevent the default action on all of your navigation tabs.
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.
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 am using a link to jump to the content section of the page. It works fine; however, in IE and Chrome, after the jump if I press Tab it goes back to .
link : Skip to Content
Content Location <a id="anchortext" class='hidden'>Content</a>
Any Idea?
I suspect it has to do with the tab indexes of existing html elements on the page - clicking on an anchor tag as the one you specify above will take you down to the relevant section, but then pressing tab will take you to the first available tab stop (usually a link or form input item), which could very easily be back at the top of the page.
If you refresh the page and press tab once, you'll be taken to the first tab index enabled element of the page - I'm guessing that'll probably be the same section you were being taken to in your original question...
This appears to be a matter of different handling of internal links in browsers, and seems to fall into the category of behavior not defined in specifications, hence browser-dependent.
When you have focused on a link (usually, with tabbing) and hit enter to follow the link, browsers may or may not retain the focus. You can see the difference in behavior by using a CSS rule like :focus { background: yellow; }.
If the focus is retained (which is somewhat illogical, as the focused element may well be out of sight), a tab will take you to the next focusable element on the page (“next” in the sense of tabbing order).
If focus is lost, it may be treated as giving focus to the entire page (an IE oddity), or as having no focus. Either way, hitting tab will take you to the first focusable element on the page (as per the tabbing order).
I’m afraid there’s nothing you can do on a page to change this. It’s between the user and the browser.
AFAIK there's no way of doing that using only html.
So, i made a javascript script using jquery.
When the user clicks on the jump item, i look for the next link or the next link inside a specific element and put a focus on it.
This solves my problem with Chrome (>25) and IE (>7) and of course Firefox does the excelent job of interpret the tab action correctly.
$("#jumpToMenu").on("keydown", function(e) {
var keyCode = e.keyCode || e.which;
if(keyCode == 13) {
e.preventDefault();
e.stopPropagation();
$("#myMenuToJump").find('a:first').focus();
}
}).on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$("#myMenuToJump").find('a:first').focus();
});
Hope this helps...
I have a div with a scroll bar which displays 15 months with 3 of the min each row, When the page loads I want to fix the scroll bar position to 2nd row as shown in my screenshot.As in the scroll bar should to be fixed to the position shown in my screenshot as opposed to top of the div.The reason for this requirement is we are displaying previous 3 months, but the user should see the current month when the page loads. I hope I have made it clear
I am using
<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">
Can you guys please help?
Thanks,
Adarsh
You need to use JavaScript for this:
<!--
Place this script before closing </body> tag so that
DOM (HTML elements tree) is already built when the script is running
-->
<script>
// create a closure to not pollute global scope
!function () {
// cache reference to keyDates element
var keyDates = document.getElementById('key_dates');
// set scroll to the height of one row
keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>
Here is the documentation of element.scrollTop
If you are using jQuery, you do it like this (and here are the docs);
<script>
$('#key_dates').scrollTop( 150 );
</script>
An example with jQuery: http://jsfiddle.net/gryzzly/CjdwX/
It seems I can't demonstrate this properly with jsfiddle, but here is a sample of code which works if you test it in a browser. Using anchors on each row, we can anchor the window to a specified location either using href or the url.
For example, if you implemented this code at www.address.tld/calendar, to show row two, you'd enter www.address.tld/calendar#row2.
You can use only an anchor on row two, and you could place it either statically or programmatically depending on your needs. It's a pretty straight forward solution, but some people don't like the hash and anchor name being in the url. It doesn't bother me.
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>