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 :)
Related
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.
I have a lot of pictures on my page. and I want to do some javascript and PHP processing when the user scrolls down to each image. I have come up with the follwing:
$(window).scroll(function(){
hT = $('.Picture-1A:eq(3)').offset().top,
hH = $('.Picture-1A:eq(3)').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if ((wS >= (hT+hH-wH))){
alert('you have scrolled to the h1!');
}
});
The above example only works if I reach to a certain image. And I want to do something when the scroll reach an image. I want to get it's ID and process that in PHP using AJAX.
Let's assume that the following are the images:
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
What I want to do is add 1 impression to the image that has appeared on the window. and I want to do that using AJAX every time the user scrolls down the page.
That's it
Update:
I have found a great library thanks to Eugenio Enko. and here is how it's done:
Include the library code in your project after jQuery:
If you want it to trigger for each image, then use each like so:
$('.Picture-1A').each(function() {
$(this).waypoint(function(direction){
alert($(this).html());
});
});
But I am having trouble getting the html of $(".Picture-1A").html() using this it returns undefiend
Here you can view an example using the old waypoint:
http://codepen.io/eugenioenko/pen/qZMqOW
$(document).ready(function(){
$('.spfx-scroll-p').waypoint(function(){
alert('scrolled');
},{offset:'90%'});
});
There are two libraries I know that could help you with that:
http://imakewebthings.com/waypoints/
http://scrollmagic.io/
The second one is more complete and has much more option, but for what you need, it seems that waypoint should work well enough.
best regards.
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})
}
});
here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)
Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle
I'm taking a coding class at school and am very new to javascript, so hopefully what I'm asking will make sense!
Right now I have a page where if you click an html button, an image of a worm appears in a div below it (called "bugs"). the same image appears each time you click the button. I've done this by having the button click call a function that creates an img element and adds it as a child of the div. the issue is I want the images to move randomly around the page or even just inside the div. I've found some code that will animate a div so it moves randomly using jQuery (here), but I can't for the life of me figure out how to apply it to the images.
The js code that makes the images looks like this:
var BugSpace = document.getElementById("bugs");
function NewWorm(){
WormPic = document.createElement("img");
WormPic.src = "worm.png";
BugSpace.appendChild(WormPic);
};
Most of my code is pieced together from various tutorials so is likely pretty convoluted. anyway, if anyone can figure this out I'll be eternally grateful :~)
Edit: I suppose I should further clarify that the code includes two other buttons to make two other types of bugs! I'd like to be able to have a few images of each bug moving on the page at once. I figure the best way to do this is to find a way to animate the children of the "bug" div? I am, however, wondering if the answer to my problem might turn out to be a complete reworking of the code I have now!
If you're comfortable using jQuery, then you can use the following solution.
You basically still animate the div and because the img is contained within the div, it will animate too.
All you need to do is call the animateDiv() function after you've added the image.
$(document).ready(function(){
$button = $('#button');
$bug = $('#bug');
$wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";
$button.on('click', function(){
$bug.html($wormimg);
animateDiv();
});
});
The animateDiv() function here is exactly the same as the link you've provided.
Have a look at the jsfiddle: http://jsfiddle.net/3xgqogkk/
EDIT (based on more information from the comments)
So the new core javascript looks like:
$(document).ready(function(){
$button = $('#button');
$bug = $('#bug');
$wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";
$button.on('click', function(){
$bug.append($wormimg); //Changed this to append so we can add more than 1
animateDiv($bug.children().last());
//We're basically passing the last worm you've added as a variable
});
});
Which means you have to make some modifications to the animateDiv() method, which is now actually animateDiv($worm)
function animateDiv($worm){
var newq = makeNewPosition();
var oldq = $worm.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$worm.animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv($worm);
});
};
The important thing is to understand everything that's happening here, so if you have any questions, just ask :)
The jsfiddle is also updated: http://jsfiddle.net/3xgqogkk/