I have made this site/webapp and you can drag the onion out of the white space it's in and onto anywhere on the page but, when you click the button at the left side it disappears when the rest of the div it was/is in. How can I make it not disappear when the user drags it out of the white box?
I used jQuery to make it slide out and in:
$( "#button" ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
and this html to make it work:
<button id="button"><-></button>
<aside class="ingredients" id="toggle">
<section class="center">
<section class="onion" id="draggable"></section>
<section class="butter"></section>
</section>
</aside>
The sections use background images to make them appear:
.onion {
background-image: url(onion.png);
margin: 20px auto -300px auto;
}
.choppedonion {
background-image: url(choppedonion.png);
}
Try this in-built JQuery option for dragging.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draggable </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
find relevant documentation here
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
I am trying to show products and when I apply the animation it applies to the whole div
for instance
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
$(document).ready(function()
{
$(".product_area").slideUp(); //Whole div slides up.
$(".product").slideUp(); //Just one product slides up.
}
What I want that one by one the product slides in from right.
Check this out
$(function(){
//$(".product_area").slideUp(); //Whole div slides up.
//$(".product").slideUp(); //Just one product slides up.
var delay = 500
$('.product').each(function(){
$(this).delay(delay).toggle( "slide" );
delay = delay+1500;
});
});
/* Put your css in here */
.product {
display:none;
width:100px;
background-color:#ccc;
padding:15px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
</body>
</html>
I am trying to pause a parallax div and replace it with a static image. The jQuery code below works very well, but it kills ALL of the other divs (I only have one additional in the code below as an example). How can I just isolate the divs in the <section> area?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Close to Working</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.parallax-layer {
position:absolute;
}
.hundred {
width:auto;
height: 390px;
}
</style>
</head>
<body>
<div style="background-color:rgba(0, 0, 0, 0.3)">
<img src="./images/top_logo.png" alt="" />
</div>
<section>
<button class='pushme'>Pause Sliding Images</button>
<script>
$(".pushme").click(function () {
var $el = $(this);
$el.text($el.text() == "Resume Sliding Images" ? "Pause Sliding Images": "Resume Sliding Images");
});
</script>
<div class="hundred">
<div id="port" style="position:relative;top:-15px;">
<div style="left: 0%; margin-left: 0;" class="parallax-layer">
<div>
<img src="./images/para.png" alt="" class="fadeIn fadeIn-4s fadeIn-Delay-4s" />
</div>
</div>
</div>
</div>
</section>
<div style="display: none"><img src="./images/ch_logo.png" alt=""/></div>
<script>
$( "button" ).click(function() {
$( "div" ).toggle( "slow" );
});
</script>
<script type="text/javascript" src="para3_files/jquery_002.js"></script>
<script type="text/javascript" src="para3_files/jquery_003.js"></script>
<script type="text/javascript" src="para3_files/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(xvalue){
// Declare parallax on layers
jQuery('.parallax-layer').parallax({
mouseport: jQuery("#port"),
yparallax: false
});
});
</script>
<script type="text/javascript" src="./js/home2.js"></script>
</body>
</html>
If you are talking about $( "div" ).toggle( "slow" ); toggling all of your divs, that is because that is what it is doing.
If you use $( "section div" ).toggle( "slow" );, it will only toggle divs inside of sections
the code below allows me to have 5 different items on a page, and then let me clone any item I drag to different area and allow me to drag the new clone item. However, when I try to move the clone item to different location, it again clone that item. what did i do wrong?
<blockquote>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 5px; height: 5px; padding: 0.5em; }
.arrow h3 { text-align: center; margin: 0; }
</style>
<script>
function DragClone(id) {
$('.' + id).draggable({helper: "clone"});
$('.' + id).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
}
</script>
</head>
<body>
<div id="test1" class="i1" onmousedown="DragClone('i1');">
<img src="img1">
</div>
<div id="test2" class="i2" onmousedown="DragClone('i2');">
<img src="img2">
</div>
<div id="test3" class="i3" onmousedown="DragClone('i3');">
<img src="img3">
</div>
<div id="test4" class="i4" onmousedown="DragClone('i4');">
<img src="img4">
</div>
<div id="test5" class="i5" onmousedown="DragClone('i5');">
<img src="img5">
</div>
</body>
</html>
</blockquote>
if i do, it works fine but i do not want to create 5 the same function with just different class name.
$(function() {
$('.chaser').draggable({helper: "clone"});
$('.chaser').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
});
so my main goal is to create one function and pass in the class name so it knows to clone that item only and only clone the original and not the clone. Then allow me to drag the item around and resize the new clone item. please advise. thank you
I hope this will help you, its not perfect i think but quite near jsfiddle
HTML
<div id="test1" class="cloneable" onmousedown="DragClone(this);">
<img src="img1.png">
</div>
<div id="test2" class="cloneable" onmousedown="DragClone(this);">
<img src="img2.png">
</div>
JS
DragClone = function(elem) {
if($(elem).hasClass('cloneable')) {
$(elem).draggable({helper: "clone"});
$(elem).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable().removeClass('cloneable'));
});
}
}
Update:
I update jsfiddle
I am new to jquery. I am trying to drag and resize a textbox using jquery. But i am facing some problems. I could drag and re-size the text box. But.. just look at the below screenshot.
To drag the text box, first i have to drag and move that "Edge" (showed in arrow mark), out of the box.
In all mean, it is not a good idea. So can somebody help me to simply drag the textbox?
below is my code
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Constrain movement</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#containment-wrapper { width: 300px; height:300px; border:2px solid #ccc; padding: 10px; }
#custombox { width: 160px; height: 30px; padding: 0.5em; float: left; }
</style>
<script>
$(function()
{
$("#custombox").draggable({ containment: "#containment-wrapper", scroll: false }).resizable();
});
</script>
<body>
<div id="containment-wrapper">
<div id="custombox" >
<textarea></textarea> </p>
</div>
</div>
</body>
</html>
When i tried the code in jsfiddle.net, the textbox is non-dragable. Only resize is possible. But i copied the code to notepad and run it on chrome. Then the problem in the screenshot appeared.
After drag the edge outside the textbox, the box can be dragged to anywhere in the containment.
Check this
$(function()
{
$("#custombox").draggable({ scroll: false }).resizable();
});
Fiddle