I am trying to create a draggable element which will have a tail on its left side. When I will be dragging it on the right side the associated tail should dynamically expand making sure it is attached to the dragged element.
Here is the sample which I was trying:
$(function() {
$("#draggable").draggable({
axis: 'x',
containment: $('this').closest('#container'),
cursor: '-moz-grabbing'
});
});
#container{
height: 100px;
border: 1px solid black;
}
#draggable {
height: 100%;
width: 80px;
border:0.2px solid black;
}
#draggableTail {
height:0.1px;
width:100px;
margin-top:40px;
border:2px solid black;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='container'>
<div id='draggableTail'>
</div>
<div id="draggable">
<div id="someContent">
<p>
HAVE A GOOD DAY
</p>
</div>
</div>
</div>
Related
i'm having a problem with my code: its supposed to have draggabillity from right to left and should be sortable in the left. so far so good.
But im encountering an error: when i drag the items from the left div, another clone appears in the screen and i can't figure it out.
i also need help for adding multiple items from right and using a counter for showing the number of the same item.
here is my code:
$(function drag() {
$(".item").draggable({
cursor: 'move',
helper: 'clone',
appendTo: '#droppable',
});
});
$(function drop() {
$("#droppable").droppable({
accept: '.item',
drop: function(event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({
helper: "clone"
});
$("#droppable").disableSelection();
});
#draggable {
width: 150px;
height: 600px;
border: 1px black hidden;
float: right;
}
.item {
width: 70px;
height: 100px;
border-radius: 10%;
margin: auto;
margin-top: 11.5%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
#droppable {
width: 150px;
height: 600px;
border: 1px black solid;
float: left;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: black;
}
#div_4 {
background-color: green;
}
#div_5 {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<body>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ondrop="drop(event)">
</div>
</body>
Here you go with the solution https://jsfiddle.net/0nf83chm/1/
$( ".item" ).draggable({
cursor:'move',
helper:'clone',
appendTo:'#droppable',
});
$("#droppable").droppable({
accept: '.item',
drop:function (event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({helper: "clone"});
$("#droppable").disableSelection();
#draggable{width:150px; height:600px; border:1px black hidden; float:right;}
.item{width:70px; height:100px; border-radius:10%; margin:auto; margin-top:11.5%;}
.red{background-color:red;}
.blue{background-color:blue;}
.black{background-color:black;}
.green{background-color:green;}
.yellow{background-color:yellow;}
#droppable{width:150px; height:600px; border:1px black solid; float:left;}
#div_1{background-color:red;}
#div_2{background-color:blue;}
#div_3{background-color:black;}
#div_4{background-color:green;}
#div_5{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ></div>
I try to select a div which has a specific html. Look at my example:
$("#clickMe").click(function(){
$("div:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
jsFiddle: https://jsfiddle.net/fj1brnv8/2/
However, the parent div's color also changes.
Is there a way to only select the element itself, I am not allowed to use ID's.
Better mention the className in the selector $("div .normal:contains('heinrich')")
$("#clickMe").click(function(){
$("div .normal:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
In your exable should be different selector:
$("#masterdiv > div:contains('heinrich')")
Just change the root selector.
UPDATE
Select every div and use the filter method.
Clone the div you're filtering, select all the children (nested divs), remove them then "come back" to the parent cloned div and retrieve the text.
Having the text, compare the contents with the text you're searching.
$("#clickMe").click(function(){
$("div").filter(function(idx, val) {
return /heinrich/gi.test($(this).clone().children().remove().end().text());
}).css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
This should do
$("#clickMe").click(function(){
$("#masterdiv div:contains('heinrich')").css("background-color", "limegreen")
});
Since you didn't want to use ids I can suggest you to try this.
$('div > div:contains(heinrich)').css("background-color", "limegreen")
Working Fiddle: https://jsfiddle.net/g50cfqzw/
Try this
$("#clickMe").click(function(){
var html_trg="heinrich";
$('.normal').each(function(i,u){
var divtxt=$(u).html();
divtxt=$.trim(divtxt);
if(divtxt==html_trg){
$(u).css("background-color", "limegreen");
}
});
});
try this it will work
$("#clickMe").click(function(){
$("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
});
I have two divs side by side within a parent div - the left div will contain text, while the right div will contain an image, and on button click, the right div can expand, or reduce back to its original width.
<style>
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
</style>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
javascript to expand/reduce the div:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$("#button1").attr('value','Expand');
}
});
Right now, when I increase the width of the right div, it slides underneath the left div. But what I want is for the left div to reduce in size accordingly, and take on the remaining width available within the parent, with left and right div remaining side by side.
JSFiddle
My css is weak, and I'm guessing this is something I can do in css, without having to use javascript to resize the left div too. Suggestions appreciated as always.
Your left div just wasn't being updated with the correct size so your container was more than 100%. I've fixed it here:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$(".left").animate({width:"38%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$(".left").animate({width:"60%"});
$("#button1").attr('value','Expand');
}
});
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
not really good myself, but maybe something like http://jsfiddle.net/fd9pos8m/ ? not smooth though
<div style="padding:2px; width:500px; background: #FFFFFF ">
<div class="left" style="float:left; width:50%; background: #ff0000 ">Left Content</div>
<div class="right" style="margin-left:52%; width:38%; background: #000000 ">Right</div>
<div style="clear:both"></div>
<input type="button" id="button1" value="expand">
</div>
<script>
$('#button1').click(function(){
var val = $(this).val();
if(val == 'expand') {
$('.right').animate({width:'60%'});
$(this).val('reduce');
} else {
$('.right').animate({width:'38%'});
$(this).val('expand');
}
});
</script>
Here try this does this work? http://jsfiddle.net/CFNUJ/917/ the #right-bg { is staying to the #left-bg
the first is using just css
How about using css flexbox? You don't have to worry about that .left or .right jumps down when there's no enough space for them, it just handles that situation for you.
Do remember to check the browser support for flexbox though.
I only tweaked the css:
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
display: flex;
}
.left{
width: 60%;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
}
jsfiddle
http://jsfiddle.net/sen3t6vk/74/
Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.
I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>
I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.
i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE
Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo
You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle