For some reason, this piece of code work just find in Chrome, but not in Firefox. I have no idea why, so I hope someone can help me.
The div "slideshow" and it's content wont show at all in Firefox. It's like the JS is not even loaded.
HTML
<div id="slideshow">
<div class="slideshow_text">
<p class="txt1">Er du klar?</p>
<p class="txt2">til et <span>NYT</span></p>
<p class="txt3">&</p>
<p class="txt4">BEDRE <span>JEG</span>?</p>
</div>
<img id="slide_1" src="img/ss/large_slide1.jpg" alt="Woman">
<img id="slide_2" src="img/ss/large_slide2.jpg" alt="Woman">
<img id="slide_3" src="img/ss/large_slide3.jpg" alt="Woman">
</div>
JS
$(document).ready(function() {
$("#slide_1").animate({left: 0}, 700);
$(".slideshow_text").slideDown("slow");
$("#slide_1").click(function() {
$("#slide_1").animate({left: "-980px"}, 700);
$("#slide_2").animate({left: 0}, 700);
$("#slide_3").css("left", "980px");
});
$("#slide_2").click(function() {
$("#slide_2").animate({left: "-980px"}, 700);
$("#slide_3").animate({left: 0}, 700);
$("#slide_1").css("left", "980px");
});
$("#slide_3").click(function() {
$("#slide_3").animate({left: "-980px"}, 700);
$("#slide_1").animate({left: 0}, 700);
$("#slide_2").css("left", "980px");
});
});
CSS
#slideshow {
width: 980px;
height: 445px;
margin: 50px auto 25px auto;
position: relative;
overflow: hidden;
}
#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
}
.slideshow_text {
display: none;
width: 200px;
background-color: rgba( 255, 255, 255, 0.4);
position: absolute;
top: 100px;
left: 650px;
z-index: 9;
border-radius: 4px;
padding: 15px;
}
.slideshow_text p{
float: left;
width: 100%;
color: #FFFFFF;
}
If you need more details, let me know. Frankly I don't really know what else to write.
Does it help if you put a width and height on your images?
#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
height: 445px;
width: auto;
}
What version of jQuery are you using? If you use jQuery 1.9.1 it will work in FireFox, however, with jQuery 2.0.2 it will not [at least checking with an older browser it did not]
Check out this example I created based on your code [no code changed, just using jQuery 1.9.1], does this solve your problem?
Apparently it was my "#wrapper" that collapsed on it self, hiding all the content within.
Adding a height did not do the trick, but adding a border did the trick and the content would show.
Related
$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
}).animate({
top: "+=1000"
}, function() {
$(".raindropDelete").remove();
});
body {
background: rgb(0, 0, 0);
}
.shape {
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">
I got this bit of code but I just can't seem to get it to work the way I want to. I want to make an image fall down to the bottom of the screen but to delete itself just before a scrollbar appears.
JS:
$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
}).animate({top :"+=1000"}, function() {
$(".raindropDelete").remove();
});
HTML:
<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and CSS:
body{
background: rgb(0, 0, 0);
}
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
Am I doing anything wrong?
JSFiddle
You are trying to remove your droplet in the function that is used to do something when animation is completed. So droplet animation is still going until it will reach +1000px from the top.
To remove before it falls below the window it's possible to use step option for animate method. What it does is looking what happens during animation and you can remove the droplet if when it falls below the edge.
Step Function
The second version of .animate() provides a step option — a callback
function that is fired at each step of the animation. This function is
useful for enabling custom animation types or altering the animation
as it is occurring. It accepts two arguments (now and fx), and this is
set to the DOM element being animated.
now: the numeric value of the property being animated at each step
fx: a reference to the jQuery.fx prototype object, which contains a number
of properties such as elem for the animated element, start and end for
the first and last value of the animated property, respectively, and
prop for the property being animated.
So what I've done is created a step function that each step looks if droplet is reached the edge of the window. If condition is met - just remove the droplet
$(".raindrop1").clone()
.removeClass("raindrop1")
.addClass("raindropDelete")
.appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
})
.animate({top :"+=100"},
{step: function(now) {
if (now+50 >= $(window).height())
$(".raindropDelete").remove();
}
},
function() {});
body{
background: rgb(0, 0, 0);
}
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
using this css you can stick your image to the bottom of the window in all new browsers
.fix{
position:fixed;
bottom:0px;
left:50%;
}
<img src="yourimagepath" class="fix"/>
and for IE6 you can use
position:absolute; instead of fixed. It will position the image on the bottom of the page but as you scroll up the image will scroll with the page. Unfortunately position:fixed in not supported in IE6
Using this code you can detect if the user has reached to the bottom of the page. Here you can add your code for deleting the image. If you put the code here the image will be deleted automatic if the user reaches to the bottom of the page.
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
You can use sticky elements. They are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.
[Ref: http://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/]
Look at the following code for an example:
https://codepen.io/rpsthecoder/pen/zGYXEX
HTML:
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
</div>
<br />
<div class="extra"></div>
CSS:
#sticky {
position: sticky;
background: #F762BC;
width: 100px;
height: 100px;
top: 70px;
left: 10px;
display: flex;
justify-content:center;
align-items:center;
box-shadow: 0 0 6px #000;
text-shadow: 0 0 4px #fff
}
#wrapper {
width: 75%;
margin: auto;
height: 400px;
background-color: #ccc;
}
.extra{
background: #ccc;
width: 75%;
margin: auto;
height: 100px;
}
body {
height: 1000px;
font-family: georgia;
}
h4{
text-align: center;
}
I have fixed button on my index.php thats works for going to top when user is at the bottom of the page.
<button id="fixed-btn"></button>
and its css is like this.
#fixed-btn{
position: fixed;
bottom: 50px;
right: 50px;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: red;
opacity: 0;
}
#fixed-btn.show{
opacity: 1;
}
for doing so i write jquery
$(document).ready(function()
{
function testScroll(ev)
{
if(window.pageYOffset>400)
{
$('#fixed-btn').addClass('show');
}
else
{
$('#fixed-btn').removeClass('show');
}
}
window.onscroll=testScroll
$("#fixed-btn").click(function()
{
$('html, body').animate(
{
scrollTop:0
}, 1500 );
});
i don't know why it is not working.button is not visible . can anyone has idea about it then please share . Thanks in advance :)
I see your code i think this will solve your problem.replace your css by given below
#fixed-btn{
position: fixed;
bottom: 50px;
right: 50px;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: red;
z-index: 9999;
opacity: 0;
}
you just add z-index: 9999; in this #fixed-btn{..}
if still face issue then let me know.
http://honghanhdinh.com/
I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning.
As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.
I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.
I've tried many things to fix it but I think I'm missing something.
Here is the beginning of HTML code:
<BODY>
<!--Begin about info--!>
<MAIN>
<section id="bg" data-speed="10" data-type="background">
<div id="plane">
<img src="http://www.locanto.info/classifieds/images/airplane.png">
</div>
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
Here is my CSS:
#bg {
background-color: #FFFFFF;
background-size
}
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
This is the jQuery for the "Hong Hanh Dinh" scrolling:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: 200
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: 500
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
This is the jQuery for the flying plane:
$(document).ready(function() {
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#plane').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
});
});
Please let me know if my error is in the CSS or in the jQuery. Thank you!
I think you could fix this by adding width: 0; and overflow: hidden; to your div#plane. Otherwise, follow these steps:
Step 1:
Remove the img tag from the plane div, it is not needed. Add the id to the img tag itself.
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
Step 2:
#plane{
position: fixed;
right: -WIDTH OF IMAGE;
}
Step 3:
$(document).ready(function() {
$(window).scroll(function() {
$('#plane').css({
'right': $(this).scrollTop() - WIDTH OF IMAGE,
});
});
});
Your name "Hanh Dinh" does exist when it loads but it is out of our range of sight, change this line:
css: {
top: 200
}
To a number like -400 and you'll see it'll appear on screen.
(That is for Hanh, for Dinh you'll need a larger number like -900.
i found this kinda styled anchor name in this website http://maplestory.nexon.net/
can anyone know how to do this? What is that called?
This is a sample code, try like this
html
<div id="mydiv"></div>
<a href="#" id="backtotop" ></a>
<div id="mydiv1"></div>
script
$(window).scroll(function(){
$('#backtotop').stop().animate({ top: $(window).scrollTop()+100 }, 500);
});
css
#mydiv
{
background-color:red;
height:1000px;
width:300px;
}
#backtotop {
z-index: 81;
position: absolute;
left: 300px;
width: 64px;
height: 93px;
background: url(http://nxcache.nexon.net/maplestory/img/bg/bg-backtotop.png) 0 0 no-repeat;
}
and here is the demo,
DEmo
One more example of such feature implementation:
var $toTop = $('#to-top').click(function() {
$('body').animate({
scrollTop: 0
});
});
$(window).scroll(function() {
$toTop.toggle($(window).scrollTop() > 100);
})
.trigger('scroll');
Demo: http://jsfiddle.net/d5czx/
its css try this code
{
z-index: 81;
display: none;
position: absolute;
right: -53px;
width: 64px;
height: 93px;
background: url('Image URL') no-repeat scroll 0px 0px transparent;
}
I think not just css is being used, for the style and position yes but for the scrolling, probably done with jquery
I want that when you hover over the part that is inside the iframe/ hyperlink the animation will work. Currently nothing happens. I have made the width of the div on my website slightly wider so you can see what the mouse over event (action) should do.
Html (for video):
<div id="box3" onmouseout="$('#box3').stop().animate({boxShadow: '10px 10px 15px', top: 0}, 'fast')"
onmousemove="$('#box3').stop().animate({boxShadow: '3px 3px 3px', top: 3}, 'fast')" style="top: 0px;
width: 710px;
box-shadow: 10px 10px 15px 0px rgb(102, 102, 102);">
<iframe width="700" height="525" id="under" src="http://www.youtube.com/embed/LRo-L9zYf-M" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
I tried putting another div in front of the iframe using css and z-index but that didn't work
Css:
#under {
width: 100%;
height: 100%;
position: relative;
}
#box3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#box3 {
z-index: 10;
Any ideas would be greatly appreciated
Thanks
You can't access the contents of an iFrame from a different domain using Javascript. All modern browsers have that as a security feature to keep you from stealing Credit Card information. As far as I know there is no way around this.