I have a different with overflow set to scroll and button that when clicked would scroll back to the top.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style>
.pages{
position:absolute;
top:30px;
bottom:0px;
left:0px;
right:0px;
border:0;
overflow:scroll;
}
.pages div{
position:relative;
width:100%;
height:300px;
border:solid 1px #CDCDCD;
border-top-style:none;
border-left-style:none;
border-right-style:none;
}
</style>
<script>
$(document).ready(function(e) {
$('#new_pages').click(function(event){
event.preventDefault();
//add new page data
//scroll to top
$('#mag_pages').animate({
scrollTop:0
},900);
});
});
</script>
</head>
<body>
<div class="new_pages" id="new_pages">
<div id="count">10+</div>
<div id="text">New Pages</div>
</div>
<div class="pages" id="mag_pages">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
</body>
</html>
After some googling I'm still no further foreward. scrollTop:0 is all any post says. Whether animated or not doesn't work on for me. Is there another method to achieve this.
The code works fine on a computer when when I test it on a mobile device the scroll function doesn't work.
Do mobiles have to be targeted differently?
Maybe JQuery scroll or animation functions have some problems in mobile devices.
Try using pure JS, instead JQuery:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style>
.pages{
position:absolute;
top:30px;
bottom:0px;
left:0px;
right:0px;
border:0;
overflow:scroll;
}
.pages div{
position:relative;
width:100%;
height:300px;
border:solid 1px #CDCDCD;
border-top-style:none;
border-left-style:none;
border-right-style:none;
}
</style>
<script>
function newPagesClicked(){
//add new page data
//scroll to top
scrollToTop
}
function scrollToTop(scrollDuration) {
var scrollStep = -window.scrollY / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( window.scrollY != 0 ) {
window.scrollBy( 0, scrollStep );
}
else clearInterval(scrollInterval);
},15);
}
</script>
</head>
<body>
<div class="new_pages" onclick="newPagesClicked()" id="new_pages">
<div id="count">10+</div>
<div id="text">New Pages</div>
</div>
<div class="pages" id="mag_pages">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
</body>
</html>
I used code like this in one of my projects and it works, try to modify your code like below:
$(document).ready(function(e) {
$('#new_pages').click(function(event){
event.preventDefault();
//add new page data
//scroll to top
$('html, body').animate({
scrollTop:$('#mag_pages').offset().top
},900);
});
});
Related
I want to let user go to some website when he clicked my website background picture(parent div), but the function need be closed when user clicked my website content(child div), and then when user clicked the background picture(parent div) again, the function will be activity.
I try many times, but when I clicked my website content(child div), and clicked website background picture(parent div) again, the function didn't work.
What can I do? Thank you!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(){
bgADlink=false;
return i = 1;
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
just remove that || i == 1 condition from test1() function like below.
function test1(){
if(i == 0)
bgADlink();
return i = 0;
}
check this fiddle https://jsfiddle.net/ca7Lbsy3/
I am not sure that is what you need, but basically you need to stop event bubbling from child to parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
$(document).ready(function(){
$(".tt").on("click",function(){
bgADlink();
});
$(".content").on("click",function(e){
e.stopPropagation();
});
});
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
this snippet is not opening parent div link either..but use this on html page then try it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(varr,event){
// bgADlink=false;
event.stopPropagation();
return i = 1;
}
function bgADlink(){
console.log("bgADlink")
window.open('https://www.google.com');
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2('',event)"></div>
</div>
</body>
</html>
There are different problems in your code.
Because events propagate from an inner element, to it's parent element (not only parent but all the hierarchy up), the "tt" div will always fire, so the best thing to do is to stop the propagation of the events with
onclick="event.stopPropagation();test1()"
I don't really understand what you're trying to accomplish with the "i" and why your having a function bgADlink() and then assigning it a Boolean, JavaScript lets you do that, but basically your function is now a Boolean.
I made you a small sample fiddler yo you can see the stopPropagation working, hope it helps.
https://jsfiddle.net/pimboden40/kg9wfdqj/29/
I recently have been trying to use Jquery to create and html animation and I am trying to make a bar float to the right as it is currently floated to the left. Although when I try to do this it wont work please help
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="assests/css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bar").animate({float: 'right'});
});
</script>
</head>
<body>
<div id="wrapper" align="center" >
<div class="obj">
<div class="bar"></div>
<div class="body">
<h1> Welcome </h1>
</div>
</div>
</div>
</body>
</html>
Css :
#import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin:0px;
padding:0px;
font-family:Raleway;
}
#wrapper {
width:100%;
height:100vh;
}
.obj {
width:500px;
height:200px;
margin-top:14%;
}
.bar {
float:left;
height:200px;
width:5px;
background-color:#95a5a6;
transition: all .5s ease-in-out;
}
.body {
width:495px;
height:200px;
float:right;
}
.body > h1 {
font-size:70px;
color:#333;
padding-top:50px;
}
You can animate the position like this:
$(document).ready(function() {
$('.bar').animate({"left" : 700 +'px'});
});
http://codepen.io/anon/pen/eZpbaP
Here is my attempt at replicating the code I have. For some reason, the code works perfectly in jsfiddle, but malfunctions with my own website. Maybe someone can somehow figure out what the issue is regardless.
http://jsfiddle.net/neowot/g0teoyrc/
So like I said, it works well in jsfiddle, but in my actual website, clicking the Button makes Div2 instantly disappear and then instantly reappear again before beginning its fade animation. Obviously this looks very bad and weird.
Does anyone have ideas as to what might be happening?
HTML
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
</body>
CSS
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
JS
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
Works for me as fiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
</style>
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
});
</script>
</body>
</html>
I have used following code from http://w3schools.com. But in this I can use only once. I want to use it more than one times because I want to create FAQ panel in HTML
but it is from ID and I can use it only once.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
demo
script:
$(function(){
$('a.toggle').click(function(){
$('.myContent').stop().slideToggle(500);
return false;
});
});
HTML
CLICK
<div>
<div class="myContent" style="background-color: #99CCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
<div class="myContent" style="background-color: #CCCCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
</div>
change the id to class and then use class selectors in css and jQuery
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
CSS
.panel, .flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel {
padding:50px;
display:none;
}
then
$(document).ready(function () {
$(".flip").click(function () {
$(this).next('.panel').slideToggle("slow");
});
});
Demo: Fiddle
I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>