I'm building an eCommerce store and I've written a small piece of jQuery to change the SRC the logo for the home page only. The issue is that when I load the page I can see the incorrect logo load before the new SRC is applied. I have recorded the issue here:
https://app.hyfy.io/v/abmoLf1Q35/?p=1
jQuery:
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/') {
jQuery(".logo img").attr("src", "newsrc.png");
}
});
</script>
Would I be correct in saying that for the jQuery to work the logo needs to have loaded first, which is why this is an issue?
Either way, could anybody advise if it's possible to have the jQuery take priority or suggest a better way of achieving what I need to here?
I appreciate the time taken to respond, thank you very much.
Yes, jquery would need to target an existing element to affect it.
in other words, the logic goes:
1. load image asset
2. alter source via jquery
if you have access to the css, you can put a display none on the .logo then when jquery alters the source, add a display:block via .css
<style>
.logo img{
display:none;
}
</style>
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/') {
jQuery(".logo").css('display', 'block').find('img').attr("src", "newsrc.png");
}
});
</script>
Related
I have a need to add a class to certain pages - ones that contain an ID of #hero. For all other pages, the class must not be added.
Because I'm using asp.net with a few layered master pages, its not as simple as just adding a class directly to the html becuase the body tag sits a couple of pages above the aspx page.
I could locate the body tag, but so far I've tried to avoid that due to the added complexity, and instead tried to use jquery.
Here's the code:
$(document).ready(function () {
updateBodyClasses();
});
function updateBodyClasses() {
if($("#hero")) {
$("html, body").addClass("hero");
}
}
Nothing complicated, but here's the rub. By the time the class has been appended, the page has been rendered and the class doesn't seem to have any effect. However, if I test it by adding the class directly to the html, it works - so I know the CSS works and that its a timing issue.
I suppose I could add the code higher up the page - jquery is deferred, so I would need to know the equivalent javascript to try it out.
Would appreciate any thoughts on this potential solution, or perhaps and other ideas.
/* UPDATE */
For clarity, it seems to be the HTML related class that isn't being applied.
You can alter the DOM without waiting for it to be ready.
You need to:
load jQuery in a synchronous way(without defer or async).
Put #hero element i above the script.
Please consider this example:
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">I don't care about DOM being ready</div>
<script>
var $el = $('#hero');
if ($el.length) {
$el.addClass('red');
}
</script>
You can use IIFE(Immidiately Invocked Function Expression):
like:
(function()
{
if($("#hero")) {
$("html, body").addClass("hero");
}
})();
just put your function in document ready like
$(function(){
if($("#hero")) {
$("html, body").addClass("hero");
}
});
No real solution provided.
Not reasitic to change the whole site infrastructure - from one that defers jquery to loading it synchronously.
The two other jquery answers are as per the current setup and don't work.
The only working solution was provided by Tushar, although it would still require selective loading of the script, which was not included in the answer.
In the end, I used a workaround, which bypassed the need for any javascript. Instead of selectively adding a class to html tag, I added the css permanently to the html tag, affecting all pages. I then added an inner div, which reverses it out. This means that any page can now manipulate its own functionality directly without having to add classes to the html tag.
I have a button which acts as a 'copy url' button. This works fine on none mobile devices, however I believe you can't have such a function on mobile devices as they rely on flash. On most mobile sites users must manually copy URLs.
So, I want to remove my 'copy url' button once a mobile device has been detected.
Before you grill me, yes I've read:
Hiding DIV if using mobile browser
I tried the solution mentioned in that thread, however it does not work. Any idea why? Here is my codepen:
http://codepen.io/rjtkoh/pen/dPxKeg
<head>
<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
</script>
</head>
<div class= "test">yo test me</div>
Much appreciated.
It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:
The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:
Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.
Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.
E.g.:
<script>
$(document).ready(function() {
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
});
</script>
The reason you're seeing this is because the DOM isn't fully built, so when you're trying to access it using $('.test'), it can't get it. You have to wait until it is fully ready.
Wrap your Javascript code in the ready function provided by jQuery:
$(document).ready(function () {
// your code goes here
});
This code will only be executed once all the DOM has been loaded.
Have a look at the documentation.
A simple way to do this is just add class to the html element when match some situation.
And use a selector to hide the elements you want you hide only when the class exist
This allows you to hide element even the <body></body> haven't actully loaded.
Besides, it requires minimal DOM operation.
So it won't lag the page when there are too many elements needed to hide.
Just put the codes in the <head></head>
<script>
if (navigator.userAgent.search("Some thing") >= 0 ) {
/*the html element*/
var root = document.documentElement;
root.setAttribute( "class", "hide-for-compitibility" );
}
</script>
<style>
html.hide-for-compitibility .selectors{
display : none;
}
</style>
Does anyone look at his codepen? Hey guy,
you did not include Jquery while using it. Put this in your HTML section <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
you put your script in wrong section, move it to JS section.
the mobile variable you obtained should be used in an IF statement. Example,
if (mobile)
$('.test').css('display', 'none');
else
$('.test').html('This ELSE leg should be removed');
Finally, getting the opinion of other answers that you should wrap your code inside a $(document).ready() function.
Here is an example and it do work. http://codepen.io/anon/pen/QweBgq
Another way that does not use Javascript is that you use CSS. Try below code in CSS section.
.test {
display: none;
}
#media (min-width: 768px) {
.test{
width: 200px;
height: 50px;
background: red;
display: block;
}
}
I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.
Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.
I'm very new with javascript.
I'm trying to create a tag using document.write (with Wordpress) to add a style that hides images before they are preloaded. I've had to resort to writing a Javascript style to hide the images before they are loaded via CSS. I don't want to actually write it into the CSS file incase the user has Javascript disabled and then the images would never show.
I'm trying to get this code to work:
jQuery(function($) {
document.write('<style type="text/css"> .preload img { display: none; } </style>');
$('#body-wrap').preloadThis();
});
But, it is just overwriting the whole page and making it go blank. How can I stop this? I want to add the tag to the without removing the page. Tried using 'return', no luck.
Sorry, I'm a novice. Thanks in advance.
Using document.write() after the page has finished loading implicitly calls document.open(), which creates a new page. You should generally avoid document.write() and stick to proper DOM creation techniques, or use jQuery's shorthand creation methods:
jQuery(function($) {
$('<style type="text/css"> .preload img { display: none; } </style>')
.appendTo("head");
$('#body-wrap').preloadThis();
});
I'm assuming you can't edit the HTML or CSS files that are loaded by the page to include this rule? If that's the case, and you want these styles applied before the page finishes loading, take `document.write()` out of the jQuery ready handler:
// write() before the document finishes loading
document.write('<style type="text/css"> .preload img { display: none; } </style>');
jQuery(function($) {
$('#body-wrap').preloadThis();
});
This will write the <style> tag immediately after the currently executing <script> tag. Hopefully, this is in your <head> element as <style> is invalid anywhere else, although all browsers should parse it OK either way.
You don't need to add <style> tag, you can just hide them with jQuery:
jQuery(function($) {
$('.preload img').hide();
$('#body-wrap').preloadThis();
});
Don't know how your preloadThis() function works, but I guess it loads images and removes .preload class from img container. If it indeed works like that, this code will not help you - images will stay hidden.
I am using some JS code to transform my menu into a drilldown menu.
The problem is before it runs the JS you see a BIG UGLY mess of links. On their site its solved by putting the js at the top. Using recommendations by yahoo/YSlow i am keeping the JS files at the bottom.
I tried hiding the menu with display:none then using jquery to .show(), .css('display', ''), .css('display', 'block') and they all lead up to a messsed up looking menu (i get the title but not the title background color or any links of the menu)
How do i properly hide a div/menu and show it after being rendered?
In the <head> place this:
<script>document.documentElement.className = 'js';</script>
Now, it will .js class to your html element. And it will be the very first thing done by the javascript on the page.
In your CSS you can write:
.js #menu {
display:none;
}
And then:
$(document).ready(function() {
$('#menu').css('display','block').fancyMenu();
});
This is an excellent technique, that allows you to make your pages "progressively enhanced", if your user has JavaScript disabled – she will still be able to see the content, and you can also separate non-JS styling with styling, that is relevant only for JS version of your menu, perhaps "position:absolute" and things like that.
At the top of your page put:
<script type="text/javascript">
document.write('<style type="text/css">');
document.write('#mylinks { display:none; }');
document.write('</style>');
</script>
And at the end of your "processing", call $('#mylinks').show();
document.write is evaluated as the DOM is processed, which means this dynamic style block will be registered in the style rules before the page is first displayed in the viewport.
This is a good case where progressive enhancement works really well - if your users have JS available & enabled, you hide the links until they are ready; but if not, they are still available, albeit ugly.
Life will be gentler with you if you try not to make pages that look like "a big ugly mess" without javascript. Have a heart.
Whatever yahoo says, it would probably be worth it for you to insert a little script that adds a style element with a few rules to the head of ypur document, before the body renders.
I found the solution. I should let the links be hidden with css then .show() BEFORE the ddMenu code executes instead of after. The ddMenu seems to check the parents width and sinces its hidden i guess its 0. The time between .show() and ddMenu is fast enough not to show the ugly links (on my machine/browser). The the majority of the time (page loading, http req for the JS files, JS compiling/exec etc) the links are hidden so it looks pretty good.
$(function () {
$('.menuT1').show(); //do it before not after in this case.
$('.menuT1 > ul').ddMenu({
Well, If you are familiar with jquery then I would do something like this
$("#mybuttom").click(function() {
$("#mydiv").hide(); //hide the div at the start of process
$.post( "mypostpage.php",
{ testvar: testdata },
function(data) {
//callback function after successful post
$('#mydiv').show(); //show it again
}
);
});