I would like to drop down a div with further information when the mouse is hovering over another div and am unsure how i should organize this. I have the following: http://quaaoutlodge.com/drupal-7.14/ and I would like that if one hovers over the Book Now area, that the TEST-div drops down as long as the cursor is over Book Now or TEST and it should drop up again as soon as the cursor leaves the area. How do I best go about this?
To get something similar to what you can see on http://www.thedana.com/, I tried to implement some onmouseover javscript code that shall be executed when hovering over the book now div. I just try to change the height of my element statically first like this:
function dropbox(element){
obj = document.getElementById(element);
if(obj) {
obj.style.min-height = "400px";
} else {
}
}
but I can't get it going. The eventual goal is to have a loop with some delay to slowly drop down the book now tab.
You can try a css approach
#book + div{
display:none;
}
#book:hover + div{
display:block;
}
+ selector
you can use this code or (reference: w3schools.com)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").hover(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
seems like I have edit obj.style.height instead of .min-height and it works fine.
Used JQuery instead and it seems to work fine:
<script src="./path/to/jquery.js"></script>
<script>
$(function() {
var fade = $('#fade');
$('#book').hover(function() {
fade.fadeIn();
}, function() {
fade.fadeOut();
});
});
with my html looking like this:
<div style="" id="book">Book Now<br/> <!-- hover div-->
<div class="fade" id="fade"> <!-- drop down div set to display:none; in css-->
Related
I'm trying to make a fadeToggle effect on jQuery,
the toggle effect works fine only in the second click on the <h1> tag.
in the first click it showing up and hide right after.
noticed that if I remove the text("how are you") method and put the inside the paragraph tag, it works perfectrly.
wondering why it doesn't work the first way.
This is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('h1').click(function(){
$('p').text("how are you").fadeToggle(500);
});
});
</script>
</head>
<body>
<h1>Hello jquery</h1>
<p></p>
</body>
</html>
fadeToggle works the same way as e.g. toggle (applies opposed attribute). And since the default state for the p element at the begininng is display: inline (is visible), then the next default action will be hiding it. That's why you have to define it initially as hidden.
$(document).ready(function() {
$('h1').click(function() {
$('.x').text("how are you").fadeToggle(500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello jquery</h1>
<p class='x' hidden></p>
It works correctly actually - the paragraph element is shown and by clicking on the heading, the function inserts text in it and then toggles fade. As the element is shown, by default (since there are no rules attached to it that would otherwise hide it), the fadeToggle will transition from shown to hidden state.
As stated in the comment above, to make fadeToggle begin by fading an element in, you should first hide the element (either via CSS or via JS, depending on your needs).
I am fairly new to web development. I am trying to apply jQuery to my website, such that when the page loads up, the heading is animated. But for some reason I am not able to get it working. Here is the javascript code :
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
Here is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome! </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery_functions.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
CSS left only works with absolutely positioned elements. If you add position:absolute to your H1 tag, it will work.
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
h1 { position: absolute; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h1>Hello!</h1>
This is because h1 may have a static position. You may need to set a CSS relative or absolute position to that element like
h1 {position: relative}
and this jQuery code will work
$(document).ready(function () {
$("h1").animate({
left: 250
});
});
See JSFIDDLE
I'm new myself but it appears your animate option is missing an argument.
$('img').animate({left: "-=10px"}, 'fast'); is an example. yours tells it how much to move, but you left off the how.
You can try changing
$("h1").animate({left:'250px'});
to
$("h1").animate({marginLeft:'250px'});
maybe $(doucment).ready()
I think it will be work ))
I am trying to make a page of tiled images which each have a three state roll over effect. I got it to work for the first image but cannot get it to effect the other images. I know it has something to do with me using getElementById but haven't been able to figure out a solution
Current Code:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css"
href="test4.css"/>
<script>
var clicked = false;
function onClick()
{
clicked = true;
document.getElementById("myImage").src="images/in.jpg";
}
function onMouseover() {
if(!clicked)
document.getElementById("myImage").src="images/half.jpg";
}
function onMouseout(obj) {
if(!clicked)
obj.src="images/out.jpg";
}
</script>
</head>
<body>
<img onmouseover="onMouseover()" onmouseout="onMouseout(this)" onclick="onClick()"
id="myImage" src="images/out.jpg" width="167" height="230">
</body>
</html>
PLEASE && THANKS
Your explanation implies that there are many <img/> on your page but your code only shows one. I will assume that your explanation is correct and that are many <img/> for the purposes of this answer.
There can be only one element on the page with a given id. Any more than 1 and the page is invalid and you will see issues like the one you see. Instead of retrieving by id, give all the elements the same class and retrieve with document.getElementsByClassName
I'll explain what I mean in more detail:
There is a way to make the entire screen movable by either dragging it with the cursor, or touching it with your fingers. You're then in turn able to snap to the div closest to your location. The div is also able to adjust based on resolution and changing the screen size.
Here is the prime example: http://making.gene.com/1/start/
I'm interested in how you can accomplish this, and I've done research on the subject.
There are many jquery plugins that let you snap to a div, or move an object on the screen, but nothing to the degree i'm looking for.
This is my first post, so let me know if there is something I can add that will help you.
Here is an example of snapping to a div, the most i've been able to find out.
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script>
This lets you snap to a div when you scroll near it, while also being able to change the proximity of when it snaps.
try this http://guidobouman.github.io/jquery-panelsnap/
this plugin snap the section
<!doctype html>
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.panelSnap.js"></script>
<script>
jQuery(function($) {
$('body').panelSnap();
});
</script>
</head>
<body>
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</body>
</html>
you should start from here
$(function() {
$( "#draggable" ).draggable();
});
working demo: http://jqueryui.com/draggable/ and http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
When building my website, I decided I wanted to add a show/hide (spoiler) section in order to conserve space. Here is my "working" code:
JQuery:
$(document).ready(function(){ //Waits for page load
$("a.spoilerButton, a.spoilerButtonDark").click(function () { //Attaches listeners
$($(this).attr('href')).slideToggle(1000, null); //Open/closes spoiler
});
});
CSS:
a.spoilerButton,
a.spoilerButtonDark {
text-decoration:none;
color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
color:grey;
cursor: pointer;
}
a.spoiler {
display:none;
}
HTML:
<div id="spoiler1" class="spoiler">Content</div> <!--Spoiler-->
<div class="contentBoxFooter">
Show/Hide <!--Button-->
</div>
What I would like:
Support for multiple buttons
A way to link the buttons to its appropriate spoiler at any place in the HTML
Problems I am facing:
Don't exactly know the proper way to link the button to its appropriate spoiler, or if I'm
doing it completely wrong
Current method uses href in anchor tag which shifts the page scroll location whenever clicked on
Main Question:
I thought about using the ID tag in the anchor tag to tell the script what the spoiler ID was, although I don't think ID tags were intended for that. Is that how I should go about doing this, or is it not the proper way to do it?
I dont know if i understand your question correctly.
On this page there are four links that open the respective spoiler tags.
This is just a simple example, I hope it can help you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="a1" class="spoiler">Content</div>
<div id="a2" class="spoiler">Content</div>
<div id="a3" class="spoiler">Content</div>
<div id="a4" class="spoiler">Content</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$('#'+foo).slideToggle(1000);
});
});
</script>
</body>
</html>