I have a contact div in my home page.
<div id="contact">....</div>
In my Menu, I have link to #contact that scrolls down smoothly to contact div.
Contact Us
While on another page, I have to use
<a href="www.mywebsite.com/#contact">
While working with wordpress where I have single menu for all pages, can I have both functionalities simultaneously or I have to create 2 different menus, one for home, one for the rest of the pages?
Add custom link as,<a href="www.mywebsite.com#contact">
in your custom jquery add
//jQuery for Page Scroll - Single page
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
// jQuery for Page Navigation
$( window ).load(function() {
if(window.location.hash) {
var url=window.location.href;
var hash = url.substring(url.indexOf('#')+1);
$('html, body').stop().animate({
scrollTop: $("#"+hash).offset().top
}, 1000);
}
});
Solution #1 - interchangeable menu items
Add x2 menu items:
Select "Screen Options" in the top-right of the screen
Select "CSS Classes" under Show advanced menu properties
Add x2 custom links ("Custom Links box"), e.g:
#contact
/#contact
Once the menu item has been added, click on it to expand it, add a
custom class in the input field below the label "CSS Classes
(optional)", e.g:
anchor-link for menu item #contact
internal-link for menu item /#contact
Declare custom styles:
/* for the home page */
.home .anchor-link {
display: block; /* or inline-block, whichever is applicable */
}
.home .internal-link {
display: none; /* hide on home page */
}
/* for every other page */
.anchor-link {
display: none; /* hide on every other page */
}
.internal-link {
display: block; /* or inline-block, whichever is applicable */
}
Note: Wordpress has a body class for the home page, appropriately called home - you can use this as a base selector for any home page specific style rules you need to declare.
Solution #2 - jQuery .attr() method
Wordpress links to jQuery CDN libraries, so we can leverage the benefits of jQuery and how it suits the requirements of a situation such as the one we have here.
Using the jQuery .attr() method, we can write a script that checks if the element in question, the url is anchoring to, already exists on the page, if it does we remove the preceding forward slash from the url of the menu item to make it an anchor link rather than an internal link.
Add the menu item and script:
Follow the methods mentioned in solution #1 to see how to enable
CSS Classes for menu items - we will need this class as a selector to target with the
jQuery script
Add the menu item as an internal link with a relative url
(better to keep it as a link initially since more often than not,
it'll need to be one - you only have the element with the id
#contact on the home page, so the script we are writing will only
have to run on the home page)
Write the script, then add it to your theme files, like the
header.php or footer.php*
*Here I would advise against editing core theme files, your customisations will be lost with any theme updates, it's also an easy way to wreck a theme if you are not wholly sure what you are doing. I would highly recommend installing a plugin for these customisations, a plugin like "Insert Headers & Footers" by WP Beginner will work perfectly, you should also find this plugin useful for future customisations of this nature and not only applicable for this "once-off use-case" - about the only time you will find me advocating the use of a plugin, otherwise it's just code bloat and another addon to maintain.
The jQuery script:
Untested but should suffice to demonstrate the intention
jQuery(document).ready(function(){
if(jQuery('#contact').length) { /* if '#contact' exists length will be greater than 0 */
/* update the href attribute for the anchor link in question */
jQuery('.dynamic-link a').attr('href','#contact');
}
});
The above script will run when the document is ready to check if the element with the id "contact" already exists on the page, if it does, it'll update the href attribute on the menu item we added the custom class to (.dynamic-link). Note that this custom class is added to the list item (li) and not the nested anchor link (a).
Related
I am working on a Website with fixed menu at the top of the Site. If you hover over the navigationbar it moves down to reveal the links.
The hover is realised with css classes.
The navigation should be shown completely, when you enter the site or scroll to the top.
I am trying to realise it using a javascript method which uses with the scroll progress.
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS > 200){
alert('you have scrolled to the h1!');
$document.getElementById('awning').addClass('awning:hover');
$document.getElementById('nav').addClass('awning:hover #nav');
}
});
Does it make sense or is there a better way to do it?
The alert doesn't even show up
You cannot assign pseudo-classes like this. A pseudo-class is used to define a style of element when special state occurs (for example hovering over element, link being already visited) or element is somehow special( first of kind, even etc.).
You will have to create additional class in css like this:
#awning.revealed{ /* notice there is no space between selectors */
/*your css code goes here (same as in :hover)*/
}
And then just add class to element like this:
$document.getElementById('awning').addClass('revealed');
Please use the code below and click on the 2nd value (200)
$('.wi').on( "click", function() {
console.log('clicked');
var temp = $('.wi');
if (temp.hasClass('wi-celsius')) {
alert("Current is 'Celsius'... updating it to 'Fahrenheit!'");
var convertedTemp = parseInt(temp.text()) * 9 / 5 + 32;
temp.text(convertedTemp);
temp.removeClass('wi-celsius');
temp.addClass('wi-fahrenheit');
}else {
alert("Current is 'Fahrenheit'... updating it to 'Celsius!'");
var convertedTemp = (parseInt(temp.text()) -32)/ (9/5);
temp.text(convertedTemp);
temp.removeClass('wi-fahrenheit');
temp.addClass('wi-celsius');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="list">
<li>100</li>
<li> <i class="wi wi-celsius">200</i></li>
<li>300</li>
</ul>
Is that what you need?
I have two tabs: login & register. It's simple, hide login section when register tab is clicked and vice versa. When I click on register tab, login section is hidden and it's working, but when I try click again on login tab, everything is messed up.
Here is code:
jsfiddle.net/gdc5ryqj/
I created a fork of your fiddle here:
http://jsfiddle.net/fn5yjrgw/
It appears you are using bootstrap, so I would recommend using bootstrap tabs if possible and just applying your styles, but if that's not an option, here is an example (Link above to jsfiddle).
HTML:
I changed the element the tab uses to determine active state to the <div>, rather than the <p>, and put a class 'active' on the login tab to make it the one shown by default.
I added a couple of lines to your CSS at the very end:
/*** Additional Styles (ryantdecker) ***/
#tab-login, #tab-register {display:none;}
#tab-login.tab-active, #tab-register.tab-active {display:block;}
.login-reg-tab {}
.login-reg-tab.active p {
color: #E76E5D;
border-bottom: 3px solid;}
Lastly, the jQuery is simply removing the active and tab-active classes from the tab and panel areas respectively, and then adding them back to the appropriate ones based on the element clicked, so that the CSS takes care of the hiding and showing
$(document).ready(function(){
$('.login-button').click(function(){
$('.login-reg-tab').removeClass('active');
$(this).addClass('active');
$('.login-reg-input-holder').removeClass('tab-active');
$('#tab-login').addClass('tab-active');
});
$('.register-button').click(function(){
$('.login-reg-tab').removeClass('active');
$(this).addClass('active');
$('.login-reg-input-holder').removeClass('tab-active');
$('#tab-register').addClass('tab-active');
});
});
(There are definitely ways to make this even simpler, but not without reworking the markup and classes quite a bit, and I see you have a crazy big CSS file that would probably need to be refactored.)
you forgot to add the class for "tab-active"
$(".register-button").click(function () {
if ($("#tab-login").hasClass("tab-active")) {
$("#tab-login").removeClass("tab-active");
if($(".login-button p").hasClass("login-reg-text-active")){
$(".login-button p").removeClass("login-reg-text-active");}
$("#tab-login").toggle();
}
if($('#tab-login').hasClass('tab-active')) {
$('#tab-register').hide();
}
$("#tab-register").show();
$(".register-button p").addClass("login-reg-text-active");
$("#tab-register").addClass("tab-active")
});
$(".login-button").click(function () {
if ($("#tab-register").hasClass("tab-active")) {
$("#tab-register").removeClass("tab-active");
if($(".register-button p").hasClass("login-reg-text-active")){
$(".register-button p").removeClass("login-reg-text-active");}
$("#tab-register").hide();
//$("#tab-register").toggle();
}
if($('#tab-register').hasClass('tab-active')) {
$('#tab-login').hide();
}
$("#tab-login").show();
$(".login-button p").addClass("login-reg-text-active");
$("#tab-login").addClass("tab-active")
});
I am working with a site where all content is rendered via ajax postbacks using jquery. I am using Ben Alman's hashchange (http://benalman.com/projects/jquery-hashchange-plugin/) to manage the hash history which allows me to bookmark pages, use the back button etc... Everything works perfectly on everything but IE 9 of course. In IE there is a small issue with "visited" links not being marked as visited. You can see that the link turns purple(visited) for a split second after you click it before the new content is loaded. But once you click the back button the link appears as though it has never been visited. Here is a jfiddle example of what I am talking about:
http://jsfiddle.net/7nj3x/3/
Here is the jsfiddle code assuming you have jquery and the hashchange plugin referenced in head:
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
alert("Hash changed to:"+location.hash);
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
//simulate body being rendered by ajax callback
if(hash == ""){
$("body").html("<p id='nav'><a href='#test1'>test 1</a> <a href='#test2'>test 2</a> <a href='#test3'>test 3</a></p>");
}
else{
$("body").html("Right click within this pane and select \"Back\".");
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
You can simply use IE conditional comments to load a specific style:
<!--[if IE]>
a:visited {
padding-left: 8px;
background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->
Why not setup a code block only to be used by IE that sets the value of a hidden input tag to reflect the click behavior. If a link is clicked you could set the value of the input tag equal to that link id and allow you js to update the elements class to reflect the change.
HTML if IE
<input type="hidden" id="clicked_link" />
JQuery JS if IE
$(function() {
$(a).click(function() {
$(this).attr('id').addClass('visited_link_class');
});
});
CSS
.visited_link_class { color:#your color;}
Maybe if you create the proper elements and building a DOM segment before appending it to the document.
Not sure it would work, can't test it here, but here goes my try adapting your code.
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
alert("Hash changed to:"+location.hash);
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
//simulate body being rendered by ajax callback
if(hash == ""){
$("body").html(
$("<p>").id("nav")
.append($("<a>")
.attr("href","#test1")
.text("teste 1"))
.append($("<a>")
.attr("href","#test2")
.text("test 2"))
.append($("<a>")
.attr("href","#test3")
.text("test 3"))
);
}
else{
$("body").text("Right click within this pane and select \"Back\".");
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
Try to consider css LVHA roles, which means the order of an a tag pseudo class matters.
First time to define those class:
A:link
A:visited
A:hover
A:active
If this still did not solve your problem, you can use another js router(hashchange): https://github.com/flatiron/director
I used this one a lot and it works perfectly in many situations.
An option would be to also fake the browser history using the HTML5 history API. This way only after deleting the browser history the link will be 'unvisited'.
Like said on this useful page:
[...] method above switches out the URL in the address bar with
'/hello' despite no assets being requested and the window remaining on
the same page. Yet there is a problem here. Upon hitting the back
button we'll find that we don't return to the URL of this article but
instead we'll go back to whatever page we were on before. This is
because replaceState does not manipulate the browser's history, it
simply replaces the current URL in the address bar.
So like also mentioned on that page you'll have to do a:
history.pushState(null, null, hash);
You can simply use IE conditional comments to load a specific style:
<!--[if IE]>
a:visited {
padding-left: 8px;
background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->
This is a security feature in ie. The functionality of :visited has been restricted in many modern browsers to prevent CSS exploit.
Hence, there's no workaround for this issue.
We are using Foundation Section with deep linking. We must be able to link to each tab from other parts of the site.
The content of each tab is also quite long and has a side nav with anchor links to items within each tab, but the anchor links don't work with deep linking turned on.
site.com/section#Tab <- Works for getting to the tab
site.com/section#Tab#Anchor and site.com/section#Anchor <- Does not work
Is there a work around for this or should I write a scroll to function and not use anchors at all?
Sort of hacked it using rels on spans in the side nav and anchors in the content, and return false to make sure the # doesn't show up in the url.
JS:
$('.side-nav span').on('click',function(){
var hash = $(this).attr('rel');
var anchor = $('#'+hash);
$('html, body').animate({
scrollTop: $(anchor).offset().top -30
}, 1000);
return false;
});
I have the following initiation in my JavaScript; I’m always using the code shown in github by the way. The full code can be seen here
var
/* Application Specific Variables */
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
activeClass = 'active selected current youarehere open',
activeSelector = '.active,.selected,.current,.youarehere, .open',
menuChildrenSelector = '> li,> ul > li',
/* Application Generic Variables */
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
The problem lies in :
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
and in:
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
When the menu clicked in .nav, has to change the .page-content.
When the menu is clicked in .nav-sub, the content has to be replaced in .tab-content
The problem is, both menu's change .page-content, instead of just either tab-content or page-content.
Any idea how to change this?
Fix your content select
Change from
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first'
TO
contentSelector = '.tab-content, .page-content, .article:first, .post:first'
History.js isn't replacing the wrong content; ajaxify-html5.js (the script you are using) is doing exactly as it was designed:
If the user clicks on an internal link (and the link does not have the no-ajaxy class), then the script intercepts the click, stops the browser from loading the page, and initiates an Ajax request for the page.
Note that this includes all internal links on the page, not just ones in the menu.
When the Ajax request is complete, the script replaces the content on the current page with the content from the response (and does some other clever things like set the activeClass on the right menu item, update the page title and run scripts from the response).
The script uses the first element found with contentSelector as the "content" node. This does not depend on which link the user clicked on.
If you want to "ajaxify" only menu links, you can change (line 95):
$body.ajaxify();
to call .ajaxify() on your menu element instead.
If you want to update a different element with the new content, you can change (line 145):
$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */
to update another element instead.