So I have a simple jquery code to highlight the nav menu.
$(document).ready(function(){
$('#header .mm a').each(function(){
if( $(this).attr('href') == window.location.href ){
$(this).addClass('active');
}
var value = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
if( $(this).attr('href') == '/site/' && (value == '') ){
$(this).addClass('active');
}
});
});
On this page right here: http://perfectlanding.com.au/creativity
I have no idea why the code won't run. There are no errors in the console.
The code isn't inside a script tag. Fix that and it should work fine.
Looking at the page source, the script in question isn't between any tags. You can see it being emitted at the bottom of the page below the page's footer.
Copy paste this:
<script type="text/javascript">
$(document).ready(function(){
$('#header .mm a').each(function(){
if( $(this).attr('href') == window.location.href ){
$(this).addClass('active');
}
var value = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
if( $(this).attr('href') == '/site/' && (value == '') ){
$(this).addClass('active');
}
});
});
</script>
Related
This is a #id link to one page:
This is the #id link to another:
I have WP Rocket Installed, have tried to disable the JS settings but it didn't work either.
I am a novice so your advise is much appreciated.
// PAGE SCROLLER
// PUSHES ANCHOR BELOW DEPTH OF NAVBAR
(function($){
$(document).ready(function () {
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");
if (screen.width <= 320) {
var fromTop = 120;
} else if (screen.width <= 768) {
var fromTop = 124;
} else {
var fromTop = 90;
}
// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
if(href.indexOf("#") == 0) {
var $target = $(href);
// Older browser without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}
}
// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);
// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);
});
})(jQuery);
First you need to check the error $ is not a function (https://prnt.sc/12ald0n) and need to solve it. For better example you can take reference from here https://api.jquery.com/scrolltop/ to scroll top functionality.
Using jQuery fade in and fade out, I want my current page to fade out when a link on the navigation bar is selected and then I want the new page to fade in. I am unable to get the anticipated effect.
Here's my code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(2000);
$('a').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Give a try to will's suggestion. The best way to achieve this is to prevent a whole reload of your page. Use Ajax or .load() function ! "Description: Load data from the server and place the returned HTML into the matched element." Once the content is loaded, fade it in.
HTML
<body style="display:none;">
content
</body>
JS
function redirectPage() {
window.location = linkLocation;
}
$(document).ready(function() {
$("body").fadeIn(600);
$('a').click(function(event) {
if (this.href == "" || this.href == null) {
event.preventDefault();
return;
}
if ((this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(600, redirectPage);
}
});
});
Try this:
Let's your navigation link is:
My LINK
Then your jquery code should be:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(2000);
$('a.switch').click(function(event) {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Don't forget to put the event as an argument to the function.
Hope it helps!
How to select div tag inside an anchor tag. Consider the following HTML.
<a target="_new" href="https://stackoverflow.com/12.mp4"
data-placement="top" rel="tooltip"
title="Video (MP4)" >
<div class="hidden">Interesting 12</div>
</a>
I have to select all anchor tags pointing to video resource. I am able to select the anchor tags. Now How do I select the division inside it and get the text?
$("a").each(function() {
var link = $(this).attr('href');
if (typeof link == "string" && link.indexOf(".mp4") > 0) {
alert(link);
}
})
use .find('div') or .find('.hidden') after your $('a')
http://api.jquery.com/find/
$('a[href*=".mp4"]').each(function() {
alert( this.href );
$(this).find('div.hidden').text();
});
OR
$("a").each(function() {
var link = $(this).attr('href');
if (typeof link == "string" && link.indexOf(".mp4") > 0) {
alert(link);
$(this).find('div.hidden').text();
// OR
$('div.hidden', this).text();
}
});
NOTE
Placing a div within anchor tag is not valid.
$("a").each(function(){
$(this).find('div').each(function(){
....
});
});
use .find()
$("a").each(function() {
var link = $(this).attr('href');
if (typeof link == "string" && link.indexOf(".mp4") > 0) {
alert(link);
}
// get the div
var divText = $(this).find('div').text();
})
$("a").each(function() {
var link = $(this).attr('href');
a=link.length;
var filetype=link[a-3]+link[a-2]+link[a-1]
if(link[a-4] == '.' && filetype=='mp4') //you can check more extensions here using ||.
$(this).find('.hidden').text()
})
I came up with some jquery to come from an external page and to show the hidden div (#section2) on another page. The problem is that I can't seem to get #section3 to work the same as #section2. Here's the code.
jQuery(document).ready(function() {
var hash = window.location.hash.substring(0);
jQuery(hash).css({
"display": "block"
});
if (hash != '#section2') {
jQuery('#section1').css({
"display": "block"
});
}
else {
jQuery('#section1').css({
"display": "none"
});
}
});
I tried else if
if(hash != '#section3'){
jQuery('#section1').css({"display":"block"});
}
I can only seem to get either #section2 or #section3 to appear with section1 hidden when their respective urls with the hash are entered. I can't seem to get them both of them to function correctly at the same time. Basically I need some thing that will produce
if(hash != '#section2' or '#section3'). I'm learning so any help would be much appreciated.
jQuery(document).ready(function() {
var hash = window.location.hash.substring(0);
jQuery(hash).css({
"display": "block"
});
if (hash != '#section2' && hash != '#section3') {
jQuery('#section1').css({
"display": "block"
});
}
else {
jQuery('#section1').css({
"display": "none"
});
}
});
Also, look into using the jQuery .show() and .hide() instead of those css changes (same effect, but less wordy, and it remembers the previous state).
Try;
$(document).ready(function(){
var sectionhash = window.location.hash.substring(0);
$(hash).css({"display":"block"});
if(hash != '#section2' || hash != '#section3'){
$('#section1').css({"display":"block"});
}else {
$('#section1').css({"display":"none"});
}
});
OR
$(document).ready(function(){
var sectionhash = window.location.hash.substring(0);
$(hash).css({"display":"block"});
if(hash != '#section2'){
$('#section1').css({"display":"block"});
}else if(hash != '#section3'){
$('#section1').css({"display":"block"});
}else {
$('#section1').css({"display":"none"});
}
});
(function($) {
var hash = window.location.hash;
$(hash).css('display', 'block');
$("#section1").toggle(!(hash=='#section2'||hash=='#section3'));
})(jQuery);
I have a question actually I need one if/else for hide or show one div, I had wrote the following function but it didn’t work:
jQuery(document).ready(function(){ /*show div OtraUniversidad when option:selected = 165*/
var optionValue = $("#Universidad option:selected").val();
$("#OtraUniversidad").hide();
if(optionValue == 165){
$("#OtraUniversidad").show();
}
});
Actually works: $("#OtraUniversidad").hide();
I don't know what's wrong; I'm new in JavaScript and jQuery
Some help is always welcome.
I think this should work:
jQuery(document).ready(function() {
$('#Universidad').change(function() {
var optionValue = $("#Universidad").val();
if(optionValue == 165) {
$("#OtraUniversidad").show();
} else {
$("#OtraUniversidad").hide();
}
}).change();
});
Demo: http://jsfiddle.net/gGX2E/1/
optionValue == 165
This comparison is wrong, you must use this:
if(optionValue == "165")