On this page I find effect that I like and try to put it on my site but after six hour googling still nothing
http://terranea.demos.sabrehospitality.com/
So when you clik on "guide" in navigation footer slide up.
#IndexGuide{
position:relative;
width:100%;
z-index:98;
background:#fff;
}
is my div CSS and with this function I get result but with no animation like on that page
function GuideSlide(){
$('#IndexGuide').css({
'position': 'absolute',
'top': '80px',
'z-index': '100'
});
};
I look in their page source and they do something like this
$('#guide-toggle').click(function () {
$(this).toggleClass('active');
$('#guide-close').toggleClass('visible');
$('#work-cont').slideToggle();
$('#myModal2 .close').click();
if ($(this).hasClass('active')) {
currentOffset = $(document).scrollTop();
scrollPageTo(0);
} else {
scrollPageTo(currentOffset);
}
if($('#masthead,#myCarousel').length>0) {
$('#masthead,#myCarousel').slideToggle();
}
return false;
});
I try to modify but with no result.
Here is script that worked in all browsers for me!
$(document).ready(function() {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").css({top:newPosition}, 1000, function(){});
});
var flag = 'up';
function GuideSlide(){
if(flag == 'up'){
$("#IndexGuide").animate({"top": "80px"}, 1000);
flag = 'down';
}
else {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").animate({top:newPosition}, 1000, function(){});
flag = 'up';
}
};
try this check fiddle
<div class="link"><a class="open-modal" href="#myModal">Guide</a></div>
<div style="position:relative;">
<div class="header">header</div>
<div id="IndexGuide" class="footer">Footer</div>
</div>
js
var flag = "up";
$(".open-modal").click(function(){
if(flag == "up"){
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "0%"}, 2000, function() {
});
flag = 'down';
} else {
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "100%"}, 2000, function() {
});
flag = 'up';
}
})
reference https://stackoverflow.com/a/15626812/1699833
Do it with animate(). Something like this
$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
// after animation stuff
});
You could also do it without edit the position to absolute and set a negative margin-top.
Refer this link http://api.jquery.com/toggle/
I hope The following simple example will give you the solution as you expected. The following example is got from the link http://api.jquery.com/toggle/. I've copied the code so that you no need to search through the website.
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p { background: #dad; font-weight: bold; font-size: 16px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Toggle 'em</button><p>Hiya</p><p>Such interesting text, eh?</p> <script>
$( "button" ).click(function()
{
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>
Related
How is it possible to get the smooth scroll working more than once (with JQuery:s scrollTop)?
var projectContainer = document.getElementsByClassName('projectContainer')[0];
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
$([document.documentElement, document.body]).animate({
scrollTop: $(".projectContainer").offset().top
}, 2000);
projectContainer.style.background = "orange";
$(window).bind("mousewheel", function() {
$("html, body").stop();
});
} else {
projectContainer.style.background = "white";
}
position = scroll;
});
.top {
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">Scroll</div>
<div class="projectContainer">hello</div>
I've tried this but it only works for the first time after running the script.
Thanks in advance!
I don't know if I'm doing it right but I want to scroll to the next div when the user scroll down and scroll to the previous div in the page when the user scroll up.
First of all I do this to test the scroll event and the animation of scrolling :
$(document).ready(function() {
$(window).scroll(function(){
$("html, body").animate({
scrollTop: 1000
}, 1000);
});
});
That's just a test but it work well.
Now, I want to differentiate the scroll down and the scroll up event to scroll to the next or the previous div so I search and I found some solutions like this :
$(document).ready(function() {
var lastPosition = $(window).scrollTop();
$(window).scroll(function(){
var newPosition = $(window).scrollTop();
if(lastPosition - newPosition > 0){
$("html, body").animate({
scrollTop: 1000
}, 1000);
}
else {
$("html, body").animate({
scrollTop: 0
}, 1000);
}
});
});
But it doesn't work...
I think the method to get the scroll down or the scroll up doesn't work in my case.
Do you have any solution to do this or maybe an alternative ?
Thank you.
In your case, the height of the body or your container should be set to the window height and the overflow of that should be set to hidden, because you want to scroll to the target Div by javascript.
by setting the overflow: hidden on the body or your container, you prevent
the window from scrolling on the page.
body {
background: #eee;
height: 100%;
overflow: hidden;
}
The next step is detecting the scrolling direction (Up/Down). You can
check it by the deltaY property of the scroll event.
Finally, get the next or previous Div and scroll to it.
The complete example is here
$(window).on('mousewheel DOMMouseScroll', function(event) {
var deltaY = event.originalEvent.deltaY || event.deltaY;
if (deltaY > 0) {
// Scrolled to Down: Next Div
} else if (deltaY < 0) {
// Scrolled to Up: Previous Div
}
});
You can see the completed code here:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
body {
background: #eee;
height: 100%;
overflow: hidden;
}
.section {
height: 600px;
}
.section.active {
background: #ccc;
}
</style>
</head>
<body>
<div class="active section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<script type="text/javascript">
$(window).on('mousewheel DOMMouseScroll',function(event) {
var deltaY = event.originalEvent.deltaY || event.deltaY,
$activeSection = $('.section.active'),
$container = $('body'),
containerOffset = $container[0].offsetTop,
$targetSection = null,
mustBeScroll = false;
if(deltaY > 0) { // Scrolled to Down: Next Div
if($activeSection.next('.section').length > 0) {
$targetSection = $activeSection.next('.section');
mustBeScroll = true;
}
} else if (deltaY < 0) { // Scrolled to Up: Previous Div
if ($activeSection.prev('.section').length > 0) {
$targetSection = $activeSection.prev('.section');
mustBeScroll = true;
}
}
if(mustBeScroll == true) {
$container.stop(false, true).animate({ scrollTop : $targetSection[0].offsetTop - containerOffset }, 500);
// Change background color
$activeSection.removeClass('active');
$targetSection.addClass('active');
}
});
</script>
</body>
</html>
I'm trying to create a very simple 2D game where you run forward automatically and then jump at keypress to avoid obstacles along the course.
I made this so far. The only issue is that jumping "stops" the forward-motion. And if you for example hold the up button it stops the entire game and you keep flying upwards like a bird...
Can anyone give me some advice on how to fix it? I would also LOVE it if someone could guide me in how to place 1-2 random obstacles along the course and restart the game, also show total position left traveled if those obstacles are hit by the user.
My plan is to speed up the game every time you finish a course!
Thanks a lot in advance :)
<div style='' id='map'></div>
$(function(){
var unjump = function(){
$('#player').stop().animate({
bottom: '33'
});
}
var jump = function(){
$('#player').stop().animate({
bottom: '+=100'
});
setTimeout(unjump, 1000);
}
$(document).keydown(function(e) {
switch(e.which) {
case 38: // up
jump();
break;
}
});
var player = '<div id="player"></div>';
$("#map").append(player);
function run(){
var position = $('#player').position();
var width = $('#map').width();
if (position.left > width){
$("#player").css( "left", 0 );
}
$('#player').stop().animate({
left: '+=200'
});
}
run = setInterval(run, 100);
});
DEMO
the main error was in css positioning of player
css code
#player{
width:10px;
height:10px;
border:solid;
position:absolute;
bottom:0px;
}
#map{
position:relative;
}
html code
<div style='border:solid ;height:100px' id='map'></div>
js code
var interval = null;
var interval2 = null;
$(function () {
var player = '<div id="player"></div>';
$("#map").append(player);
var unjump = function () {
$('#player').stop().animate({
bottom: '0'
});
};
var jump = function () {
$('#player').stop().animate({
bottom: '+=100'
}, 500);
interval2 = setTimeout(unjump, 500);
};
$(document).keydown(function (e) {
switch (e.which) {
case 38: // up
jump();
break;
}
});
function run() {
var width = $('#map').width();
if ($('#player').position().left > width) {
$("#player").css("left", 0);
}
$('#player').stop().animate({
left: '+=10'
});
}
interval = setInterval(run, 500);
});
Try this:
https://fiddle.jshell.net/u8deLxkz/2/
Main issue was to perform run animation only if no other animation is running.
Except for that, I tidied up the code a little.
$(function(){
//No need for two separate functions, left is handled here as well
function jump(){
$('#player').animate({
bottom: '+=30',
left: '+=10'
},100).animate({
bottom: '-=30',
left: '+=10'
},100);
}
//I think keyup gives better results
$(document).keyup(function(e) {
switch(e.which) {
case 38: //up
jump();
break;
}
});
var player = '<div id="player" style="width: 50px; height: 50px; background-color: blue; position:absolute; bottom:500px;"></div>';
$("#map").append(player);
function run(){
var position = $('#player').position();
var width = $('#map').width();
$('#player').position()
console.log('pos ' + position.left + "\nwidth: " + width);
if (position.left > width){
$("#player").finish();
$("#player").css( "left", 0 );
}
//Continue with horizontal animation only if jumping is not in progress
if(!$('#player').is(':animated') ){
$('#player').animate({
left: '+=10'
},100);
}
}
var go = setInterval(run, 100);
});
I'm a beginner and just learning, so I was hoping to get some quick help with some code that I'm using to help me with a project I'm working on.
Basically, the code that I'm using to help me with my project is shown below, and it's only letting me show one tool tip for each element. How would I be able to have each element show a different tooltip using this code? Your help is much appreciated!
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>jQuery tooltips example</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="hint">hint (mouseover me)</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
</body>
</html>
Here is a link to test.
Try something more like this?
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
console.log($(event.target).data('tip'));
var tip = $(event.target).data('tip');
$('div.tooltip').remove();
$('<div>', {
class: "tooltip",
html: "I am "+tip+" :)"
})
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("#username, #hint").hover(
function(e){
showTooltip(e);
},
function(e){
hideTooltip(e);
}
);
Here's an example: http://jsfiddle.net/2kzeX/1/
I want to cut off text based on a fixed height.When the text is cut off, a "more" link is used to expand to text. When the text is expanded, a "less" link is used to collapse the text. I wrote the js as this:
$(document).ready(function () {
// line height in 'px'
var maxheight=218;
var showText = "More";
var hideText = "Less";
$('.textContainer_Truncate').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow': 'hidden','height': maxheight + 'px' });
var link = $('' + showText + '');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.css('height') == 'auto') {
$(this).html(showText);
text.css('height', maxheight + 'px');
} else {
$(this).html(hideText);
text.css('height', 'auto');
}
});
}
});
});
The html code is:
<div class="textContainer_Truncate">
<p>content</p>
</div>
My problem is that the "more" link works but the "less" doesn't. That is, when more is clicked, the text is expanded but it won't go back when the less is clicked.What's wrong here?
Thanks
It's just a small error, this:
if (text.css('height') == 'auto') {
should be this:
if (text.height() > maxheight) {
FIDDLE
I believe you are looking this one
http://jsfiddle.net/rbUst/
$(".act").click(function() {
var val = $(this).text();
if (val == "More") {
$("div").css('height', '200px');
$(this).text("less");
} else {
$("div").css('height', '20');
$(this).text("More");
}
return false;
});
div {
background-color: #CCA;
height: 20px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
More
<div>This fskdljfl sflsdajfsadf
<br />fsdafsdfsadfsdf dfjsadf slfkjsf</div>
above is the live example..