Develop Reference

DOM change - no effect. Effect visible only if changed with timeout

Weird problem. I'm modifying shop template:
https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/
At this moment when you hover product's picture there will show "add to cart" button. This is .
Under picture there is price
I prepared code:
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
Nothing happens. This code work only if I set timeout:
setTimeout(function() {
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery(document).ready(function(){
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
});
});
}, 10000);
Of course timeout it's not a solution. I was trying to find out minimal time to obtain best behavior but it's impossible. I have feeling that every browser (and version...) needs personalized time setting.
I thought that after 24-hour break I will get some brillant idea, but that doesn't work, no more ideas.
--- EDIT ---
OK, thanks for pointed mixed common js with jquery - I will correct that later.
jQuery(document).ready(function(){
var from = document.getElementsByClassName("woocommerce-Price-amount amount");
jQuery.each(from, function(i, el) {
jQuery(el.parentNode.parentNode).find(jQuery(".product-button-wrap")).append(el);
console.log(el);
});
});
That's logical that var from should be inside ready but this still doesn't work. No effect.
If I use in loop console.log it will return for me html code of el.
--- EDIT ---
Thanks. While testing I noticed something. I wanted append element .woocommerce-Price-amount.amount to element .product-button-wrap. But how can I do that if element .product-button-wrap isn't originally in source? This object is created dynamically (I don't know how).
-- EDIT --
OK. I checked JS files and found code adding to DOM .product-button-wrap so I putted my code there and now everything works. Thanks for help.

The problem is because you're running your code before the DOM has loaded. You need to retrieve the elements within the document.ready event handler.
Also note that you have an odd mix of native JS and jQuery methods. I'd suggest using one or the other, like this:
jQuery(function($) {
$('.woocommerce-Price-amount.amount').each(function() {
$(this).parent().parent().find('.product-button-wrap').append(this);
});
});
Also note that .parent().parent() should be replace by a single call to closest(), but I can't give you an exact example of that without seeing your HTML.

Javascript - Click list element to load HTML page animation

Javascript novice here. I am working on a piece of code provided here - http://codepen.io/mariusbalaj/pen/beALH/
I'm trying to modify the behavior so that instead of just zooming in the list element when clicked, it should load a different html page within the animated frame.
$(document).ready(function() {
var $box = $('.box');
$('.metro li').each(function() {
var color = $(this).css('backgroundColor');
var content = $(this).html();
$(this).click(function() {
$box.css('backgroundColor', color);
$box.addClass('open');
$box.find('p').html(content);
});
$('.close').click(function() {
$box.removeClass('open');
$box.css('backgroundColor', 'transparent');
});
});
});
Can anyone point me to the right direction?
Update 1 :
I figured out that modifying the 'content' variable on the below line would change the content of the animated frame:
` $box.find('p').html(content);`
And if I change it to something like:
` $box.find('p').html('<h1>Test Page</h1>');`
It works as expected. However, I want the content to be different for each list element.
Is there an easy way of doing this per element? I am quite confused with the 'this' keyword.

You may be looking for this answer, if you want to open another HTML page:
how to change page from within javascript
If you're trying to open it WITHIN the animated frame, you should look into making some requests to the content of the new page/tile and filling that with content, which is answered here: How to get the response of XMLHttpRequest?
It all depends what you want to do, let us know :)

anchor href does not display properly

I am trying to navigate to another page section with anchor tag from current page /contact.html. The problem I am having here is that the result view do not correspond to the start of the container. Upon searching online, I suspect that it was because the web site components are dynamically loaded and do not have fixed height for the image slider.
Nonetheless, I did not find any solution to this problem yet. Hope someone can help me in this issue.
Note: The anchor tag work perfectly as it is if it is used in the index.html page itself.
For code reference and better illustrations, please refer to following link. This is exactly the problem I am facing.
Click here
Click here
Click here

As you said in comments, you have a fixed position on your header, so you need to calculate in JS your header height.
If you have jQuery:
$('a').on('click' function(){
var $link = $(location.href);
var position = $link.offset().top - $('#header').height()
$(window.animate({scrollTop: position},{duration: 500})
});
For onload with an anchor in the URL:
$(window).load(function() {
var $link = $(location.href);
if($link.length {
var position = $$link.offset().top - $('#header').height()
$(window.animate({scrollTop: position},{duration: 500})
}
});

jQuery function is unintenionally altering text content of links and affecting CSS

I'm having very strange issues with some jQuery I've written, it seems to be altering the text content of links, and outputting a strange garbled mess. Reloading the page after seeing this happen results in everything rendering as expected. In addition, there are strange CSS issues that occur at the same time, with elements overflowing past their intended boundaries, which is also fixed on a refresh.
Here's a link to a screenshot of the issue. Red arrows point to the strange garbled link text, yellow arrows point to improper CSS. Inspecting the source of any of these elements will show the proper and intended CSS, as well as the correct text within the tags, even though neither is reflected in the page.
This might be a caching issue, as I can force the issue to happen when doing a ctrl+f5 refresh, and then after that hitting just f5 again displays the page as intended.
Here's the only code on my site affecting these links/their parent elements in any way
$.fn.linkHighlight = function() {
// highlight links in the sidebar when hovering in the article, and vice-versa
var selectorText = ".post-content a, .sidebar-wrap a";
$(selectorText).mouseenter(function(){
var $this = $(this);
$(selectorText).each(function(){
if( $(this).attr("href") == $this.attr("href") ) {
$(this).addClass("hover");
}
});
});
$(selectorText).mouseleave(function(){
var $this = $(this);
$(selectorText).each(function(){
if( $(this).attr("href") == $this.attr("href") ) {
$(this).removeClass("hover");
}
});
});
};
This function is being called in a standard $(document).ready(function({}));
Any help would be appreciated! If you want to see it happen on a live site, the screenshot above was taken from http://mikedettmer.com/projects/viewportunitpatch/

Prevent/stop auto anchor link from occurring

I need to prevent the automatic scroll-to behavior in the browser when using link.html#idX and <div id="idX"/>.
The problem I am trying to solve is where I'm trying to do a custom scroll-to functionality on page load by detecting the anchor in the url, but so far have not been able to prevent the automatic scrolling functionality (specifically in Firefox).
Any ideas? I have tried preventDefault() on the $(window).load() handler, which did not seem to work.
Let me reiterate this is for links that are not clicked within the page that scrolls; it is for links that scroll on page load. Think of clicking on a link from another website with an #anchor in the link. What prevents that autoscroll to the id?
Everyone understand I'm not looking for a workaround; I need to know if (and how) it's possible to prevent autoscrolling to #anchors on page load.
NOTE
This isn't really an answer to the question, just a simple race-condition-style kluge.
Use jQuery's scrollTo plugin to scroll back to the top of the page, then reanimate the scroll using something custom. If the browser/computer is quick enough, there's no "flash" on the page.
I feel dirty just suggesting this...
$(document).ready(function(){
// fix the url#id scrollto "effect" (that can't be
// aborted apparently in FF), by scrolling back
// to the top of the page.
$.scrollTo('body',0);
otherAnimateStuffHappensNow();
});
Credit goes to wombleton for pointing it out. Thanks!

This seems the only option I can see with ids:
$(document).ready(function() {
$.scrollTo('0px');
});
It doesn't automatically scroll to classes.
So if you identify your divs with unique classes you will lose a bit of speed with looking up elements but gain the behaviour you're after.
(Thanks, by the way, for pointing out the scroll-to-id feature! Never knew it existed.)
EDIT:

I know this is an old thread but i found something without the need to scroll. Run this first before any other scripts. It puts an anchor before the first element on the page that prevents the scroll because it is on top of the page.
function getAnchor(sUrl)
{
if( typeof sUrl == 'string' )
{
var i = sUrl.indexOf( '#' );
if( i >= 0 )
{ return sUrl.substr( i+1 ).replace(/ /g, ''); }
}
return '';
};
var s = getAnchor(window.location.href);
if( s.length > 0 )
{ $('<a name="'+s+'"/>').insertBefore($('body').first()); }
Cheers!
Erwin Haantjes

Scroll first to top (fast, no effects pls), and then call your scroll function. (I know its not so pretty)
or just use a prefix

This worked well for me:
1- put this on your css file
a[name] { position: absolute; top: 0px }
2- put this on your document.ready bind right before you start animating (if you're animating at all)
$("a[name]").css("position","relative");
Might need tweaking depending on your stylesheet/code but you get the idea.
Credit to: http://cssbeauty.com/skillshare/discussion/1882/disable-anchor-jump/