Probabely this is a very simple question but i am a beginner in Jquery...
I have following Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">/script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js">
</script>
<script>
$(function() {
$('li').draggable({
containment: 'document',
revert: true
});
$("#config").droppable({
drop: function(event, ui) {
$(ui.draggable).appendTo( "#schub" );
}
});
});
</script>
And this is what my Body contains:
<div style="width:1800px; height:600px; background-color:#efefef;padding:10px;" >
<div style="float:left; width:1250px; height:580px; border:1px solid grey; padding:10px;" >
<div id="config" style="background-color:blue; border:1px solid black; width:700px; height:500px;">
<ul id="schub" style="width:300px; height:500px;"></ul>
</div>
</div>
<div style=" background-color:red;float:left; width:490px; height:580px; border:1px solid grey; margin-left:10px;padding:10px;" id="menu">
<ul class="category">
<li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
</li>
<li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
</li>
<li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
</li>
</ul>
</div>
Now my issue: I want to be able to drag the grey <li> from the red <div> into the blue <div>. It actually works but the grey <li> are always reverting from outside of the window into the blue <div> when i drop them. Why is that happening?? Isnt it posible that my <li> revert from where i drop them?
Thanks very much for your help!
I think i found the solution:
The problem is, that the <li> is getting appended to the new <ul> in the blue div with the css style he has before ge got appended.
After dropping the <li> into the new <ul id="schub">, it has still the css from Jquery which is about left:-1000px; (it gets that because we drag the <li> from right to left). Then its getting appended to the new ul.
The browser thinks that the <li> is en element of the <ul id="schub"> with left:-1000px; which is outside of the window. The definition revert:true; is set on the <li> so it is reverting from outside of the window into the <ul id="schub">.
I actually didn't find a solution, but a workaround:
We can add the definition helper: 'clone' to the <li>. Like that we get a clone of the original. Its actually not reverting from the point we drop it but its getting appended to the new <ul> without reverting from outside of the window.
Related
This question already has answers here:
Why is this jQuery click function not working?
(9 answers)
Why document.ready is used in jQuery
(4 answers)
Closed 3 years ago.
In codepen https://codepen.io/mkliver/pen/oKbENd i got working script.
When i copy this code on my localhost nothing works. My code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Welcome to Foundation</title>
<link rel="stylesheet" href="stylesheets/collapsable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('.tree .question').click( function() {
$(this).parent().toggleClass('expanded').
closest('li').find('ul:first').
toggleClass('show-effect');
});
</script>
</head>
<body>
<ul class="tree">
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question">Question 1</a>
</span>
<ul>
<li>
<span>Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</span>
</li>
</ul>
</li>
</ul>
</body>
collapsable.css same as on codepen.
What can be wrong?
Try moving the <script> to just before </body> or wrapping it in an additional $(), which is jQuery's shortcut for $(document).ready()
You must put your script right before the body tag close. The problem that was being caused is because the script is being loaded before the actual elements being selected and manipulated.
Hope this helps!
Here is a minimal index.html file to open in a local browser, my guess is because you didn't use jQuery's $('document').ready() function, and didn't include the script at the bottom, it tried to apply your callback function to an empty DOM.
index.html
<style>
body {
font-family: Helvetica, sans-serif;
font-size:15px;
}
a {
text-decoration:none;
}
ul.tree, .tree li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
.tree ul {
display:none;
}
.tree > li {
display:block;
background:#eee;
margin-bottom:2px;
}
.tree span {
display:block;
padding:10px 12px;
}
.icon {
display:inline-block;
}
.tree .hasChildren > .expanded {
background:#999;
}
.tree .hasChildren > .expanded a {
color:#fff;
}
.icon:before {
content:"+";
display:inline-block;
min-width:20px;
text-align:center;
}
.tree .icon.expanded:before {
content:"-";
}
.show-effect {
display:block!important;
}
</style>
<body>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="eight columns">
<ul class="tree">
<li class="tree__item">
<span>
Вопросы
</span>
</li>
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question" href="#">Вопрос 1</a>
</span>
<ul>
<li>
<span>Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</span>
</li>
</ul>
</li>
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question" href="#">Вопрос 2</a>
</span>
<ul>
<li>
<span>So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). With that out of the way let’s dig into the inner workings and road blocks I faced.</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('.tree .question, .icon').click( function() {
$(this).parent().toggleClass('expanded').
closest('li').find('ul:first').
toggleClass('show-effect');
});
</script>
</body>
I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.
So far, I've managed to get my tabs to display content dynamically within a div by using a simple script.
This is my index bit:
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="custom-left-tabs -text--uppercase">
<div class="custom-left-tabs-btn hidden-lg hidden-md">
Menu<i class="fa fa-angle-down"></i>
</div>
<ul id="lefttabs" class="list-unstyled collapse">
<li class="sub-heading">Getting Started</li>
<li><a data-toggle="tab" href="pages/first.html">First</a></li>
<li><a data-toggle="tab" href="pages/second.html">Second</a></li>
</ul>
</div>
</div>
<div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
</div>
</div>
This is my script:
$(document).ready(function(){
$("#content").load("pages/first.html");
});
$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});
Ideally I would prefer not having all content chucked into one page. I've checked many similar questions/videos, but I can't really find the missing bit.
My question is really how should I write a script that does this extra bit of displaying the current tab on the URL.
Here this thing can be done using iframe which works well,
but as you suggested i have tried it. here is my code.
reference same as you gave before.
Now i am showing code here
use js in this manner:
<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#tabs a").click(function(e){
$("#tabs li").removeClass("on");
$(this).parent("li"). addClass("on");
var page = this.hash.substr(1);
$("#content_wrapper").block();
$.get(page+".html",function(html){
$("#content").html(html);
$("#content_wrapper").unblock();
});
});
});
</script>
and html code with "<div>" tag.
<ul id="tabs">
<li>TAb1</li>
<li>TAb2</li>
</ul>
<div id="content_wrapper">
<div id="content">
</div>
</div>
i have also used jquery.min.js and blocjUI.js and css
css code is here
<style>
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
li {
float:left;
list-style:none;
padding:10px;
background-color:#333;
border: 1px solid #ccc;
}
li a {
color: #FFF;
text-decoration:none;
font-family:arial;
}
#content_wrapper {
width:400px;
height:300px;
background-color: #ccc;
margin: 0px;
padding:6px;
overflow: hidden;
}
#content {
font-family: arial;
}
li.on {
background-color:#ccc;
}
li.on a {
color:#333;
}
and you will get two different page in one page.
Scrren1:
screen2:
I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/
Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.
.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.
I want to show drop down menu on mouseover. Now I am using 2 divs and use slideup to show another div for sub menu; I want to show sub menu using 1 div on mouseover. How can I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
});
$("#flip").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
}
#panel {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="flip">
<ul>Home</ul>
</div>
<div id="panel">
<ul>Sub
</br>
Sub
</br>
Sub
<ul>
</div>
</body>
</html>
`
A nested unordered list would work, something like this:
<ul id="flip">
<li>Home
<ul id="panel">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
In CSS, all you would need is to hide your sub-menu:
#panel {
display:none;
}
jQuery is the same as you had it.
See here: http://jsfiddle.net/kaizora/23uuL/
PS: If you are using a <ul> tag, in valid HTML, there should be nothing else but <li> tags inside.
How about this:
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
$("#panel").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
Fiddle Here: http://jsfiddle.net/vWGsC/
If you want to you cold also use pure CSS.
<ul class="nav">
<li class="dropdown">
Home
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="dropdown">
second dropdown
<ul>
<li>...</li>
</ul>
</li>
</ul>
</li>
This would be the html from something I have saved some time ago.
Try it out! :)
http://jsfiddle.net/patrickhaede/dqxm4/
DEMO Background color is for clearly view for user.
var temp = $('#flip ul li:eq(0)').nextAll();
temp.hide();
$('#flip ul').mouseenter(function(event) {
temp.slideDown("slow");
});
$('#flip ul').mouseleave(function() {
temp.slideUp("slow");
});
#flip li , #flip ul { list-style-type: none; background-color: yellow;}
Home
Sub
Sub
Sub
Thanks in advance. I have actually tried several javascript scripts to get this to work and none have, but my understanding of javascript is pretty rudimentary.
I cannot adjust the code of the link itself - it is being generated. But it is generated with an id and a class. I would like to have a script in the document that references the link's id so that when the user rolls over the link, a hidden ul (or div) appears - like a normal css navigation dropdown but, again, i cannot alter the code of the actual links. I can only alter the CSS in general.
Is there javascript that can do this? I can do query..
Thank you again!
bb
Here i have done drop down menu using HTML and CSS only, which show/hide on menu link hover state.
HTML:
<div id="menu1" class="menu">
<a href="#" id="link1">
Menu-1
</a>
<div id="menulist1" class="menulist">
<div>
Option1
</div>
<div>
Option2
</div>
<div>
Option3
</div>
<div>
Option4
</div>
<div>
Option5
</div>
</div>
</div>
<div id="menu2" class="menu">
<a href="#" id="link2">
Menu-2
</a>
<ul id="menulist2" class="menulist">
<li>
Option1
</li>
<li>
Option2
</li>
<li>
Option3
</li>
<li>
Option4
</li>
<li>
Option5
</li>
</ul>
</div>
CSS:
.menu{
font-size:15px;
display:inline-block;
margin:0px;
padding:0px;
}
.menu a{
display:block;
width:120px;
text-align:center;
background-color:#2211ce;
color:#dccb00;
text-decoration:none;
}
#menulist1{
position:absolute;
top:33px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menulist2{
position:absolute;
top:20px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menu1:hover #menulist1{
display:block;
}
#menu2:hover #menulist2{
margin-top:13px;
display:block;
}
.menulist div{
margin-left:0px;
padding:3px;
width:112px;
}
.menulist li{
list-style:none;
width:72px;
padding:3px;
margin-left:0px;
display:block;
}
.menulist div:hover,.menulist li:hover{
background-color:#1155ac;
color:#dccb00;
}
I have also done bins for above example, please click on http://codebins.com/codes/home/4ldqpbo