Conundrum for today:
I'm trying to create a function where the divs underneath the image highlight1A, highlight1B gain a class .highlight when the corresponding divs over the image choice1A, choice1B are clicked. So what should happen is when choice1A is clicked, highlight1A is highlighted. Like so:
But the thing that happens is, when I click one choice, it highlights both divs behind the image.
I'm trying to get the most concise function for this exercise because I'm also going to apply it to exercises where there will be more choice divs and more highlight divs. I'd like to use this so I don't have to do much editing on the .js file. I want to be able to focus on editing the HTML so all I have to do is add / subtract divs from the source file according to how many divs are needed for the following exercises.
Javascript:
function choice1 () {
if ($('div[id^="highlight1"]').hasClass('highlight')) {
$('div[id^="highlight1"]').removeClass('highlight');
} else {
$('div[id^="highlight1"]').addClass('highlight');
}
}
HTML:
<div id="choice1A" class="click1A"></div>
<div id="choice1B" class="click1B"></div>
<img src="../../../../images/chapter_5/CH5L4_21.png" width="276" height="147"/>
<div id="highlight1A" class="click1A"></div>
<div id="highlight1B" class="click1B"></div>
Also, if you generous coders would care to offer a few explanations for the codes you provide, it would be much appreciated, as I'm also looking to expand my knowledge of JavaScript and jQuery.
Thank you so much!
I don't know if there is a reason why you are approaching the problem this way, if there is, please comment and I will edit my answer.
But the simplest way to solve this problem is actually really undemanding. Here is a demo I coded for you.
What you need to do is:
Have a container element around your image;
Bind a click event on the container element, and use toggleClass.
And that's it. The event handler will work even while clicking the image instead of the container due to Event bubbling.
HTML
Your HTML could look like this:
<div class="container"><img src="http://www.example.com/image.png"></div>
<div class="container"><img src="http://www.example.com/image.png"></div>
CSS
div.container {
background-color: #fff;
}
div.active {
background-color: yellow;
}
JS
$('.container').on('click', function(){
$(this).toggleClass('active');
});
Related
I need to create a nested drag/drop functionality using purely Javascript (No Jquery or other plugins please).
The Idea is to have a several div tags as groups and having ability to drag that div tag/group on top of another div tag/group to create a sub group within itself(as a child of that group) max level of sub subs allowed is 4. To Illustrate what I am talking about please look at this Jquery Plugin NestedSortabled example, It defines exactly what I am looking for.
NestedSortable Jquery Example
Another similar example: http://dbushell.com/2012/06/17/nestable-jquery-plugin/
I need to develop my code to function exactly like the example above, but using purely old school javascript only, please dont suggest any Jquery code.
Here is what I have currently working, However I am stuck right now and cant figure out how to get the sub grouping functionality to work. Please Help!!
My working Demo: http://jsbin.com/IzAfutI/1
My working Demo + Code: http://jsbin.com/IzAfutI/3/edit?html,css,js,output
Edit:
Let me example the code in more detail. StartDrag and StopDrag contain the main logic behind the functionality. Basically when user drags a div tag I am currently creating a container on top of or underneath a already existing div tag for the item that is to be dragged to be placed into, however when I use this same funcionality to create that container within another container(via creating sub group) I am getting an error. which means Maybe I am going at the problem the wrong way maybe my logic might be wrong or else something else wrong with the code.
HTML mark up of group div tag:
<div class="dragContainerUsed">
<div id="a7b94a42-fb00-4011-bd5a-4b48e6e578c5" class="dragPanel">
<input type="hidden" value="1|fa7989d7-1708-4a90-9bf6-c91f6cef6952" />
<div onmousedown="startDrag(event, this.parentNode)" class="dragPanelHeader">
<div style="margin-left:4px; margin-top:3px; float:left;">1 - Group 1<span id="gta7b94a42-fb00-4011-bd5a-4b48e6e578c5"></span></div>
</div>
</div>
<div class=\"dragSubContainerUnUsed\"></div>
</div>
<div class="dragContainerUnUsed"></div>
So what I want to happen is when user drags another div on top of the div dragSubContainerUnUsed it should be placed within that subContainer....
On start drag, I create a array to store all the containers and subContainers:
containers = new Array();
subContainers = new Array();
containers.push(dragTarget);
for (i = 0; i < divs.length; i++) {
if (divs[i].className.toLowerCase() == "dragcontainerunused") {
containers.push(divs[i]);
}
}
for (i = 0; i < divs.length; i++) {
if (divs[i].className.toLowerCase() == "dragSubcontainerunused") {
subContainers.push(divs[i]);
}
}
and currently the part where I am stuck is in the functions onDrag and stopDrag, I dont know how to get the subContainers to work via to create the subgroups...
For Instance if I drag Group 3 on top of Group 2, I want group 3 to be a sub group of 2 Like this:
and I should be able to add max of 4 groups into each sub group, with max of 4 sub groups.
like this:
and finally there should only be a max of 4 levels of subgrouping
like this:
Please Help in anyway you can, if you can identify the problem than please tell me or if there needs to be a change in logic for my code tell me, Even if you can completely re-write/ create your own new code to make this application work would be very much appreciated. I have been trying to tackle this for a few days any and all help will be greatly accepted...
Check This code
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>"
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">`
Been working on this, completed it couple of months ago. but forgot about this post. so i decided to post the complete solution for anyone else that might be looking for a answer to this enjoy.
The entire code is too long to post it in here, but here is the link to the code:
Drag/Drop Functionality with Div Tags
DEMO: http://jsbin.com/aTUHULu/1
You have to divide the drop rectangle into 4 areas , if you drop it in the first one it will be on level 1 and if you drop it on the next 40px lets say it will be considered level 2 and hence
I would post the code as well if you want but I think the approach itself would work if you try and implement it. Here is the approach
Instead of div, add the item as a listitem . This would auto intend the control and it would be very easy for you to parse it at the end. What you need to do here is that onDrop, take the text (and other properties) from the div, create a li and add the div in that li. This would enable your code to redrag and drop the div further. Note - remember to remove the li (or ul according to the parent of div) when drag ends.
I have a tweet stream where new tweets are added at the top and the older ones pushed down. You can click on the entire tweet and a panel slides down to reveal, "reply", "retweet", "favorite" etc. The panel is added to each new tweet added in the stream.
The code below works. Shouldn't this be better written so that only one call is being made? Or, as a new tweet is added. would I just have to add to the code with div#tc4, ul#tb4 etc?
$(document).ready(function () {
$("div#tc1").click(function () {
$("ul#tb1").slideToggle("fast");
});
$("div#tc2").click(function () {
$('ul#tb2').slideToggle("fast");
});
$("div#tc3").click(function () {
$('ul#tb3').slideToggle("fast");
});
});
Added Markup:
<div id="tc1" class="tweetcontainer">
<div class="avatarcontainer">
<div class="avatar"></div>
</div>
<div class="content">
<div class="tweetheader">
<div class="name">
<h1>John Drake</h1>
</div>
<div class="tweethandle">
<h2>#Drakejon</h2>
</div>
<div class="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<ul id="tb1" class="toolbar">
<li><a class="reply" href="#"><span>reply</span></a></li>
<li><a class="retweet" href="#"><span>retweet</span></a></li>
<li><a class="favorite" href="#"><span>favorite</span></a></li>
<li><a class="track" href="#"><span>track</span></a></li>
<li><a class="details" href="#"><span>details</span></a></li>
</ul>
I highly recommend separating your javascript from your detailed page function. The best way to do this is to put the retweeting panel inside the tweet container, then you don't even need to give it an id at all or encode in the javascript information about your html structure and ids. You can then just do:
$('.tweetcontainer').on('click', function(event) {
if ($(event.target).is(':descendantof(.toolbar)')) {
//ignore all clicks within the toolbar itself
return;
}
$(this).find('.toolbar').slideToggle();
});
It's that easy! See it in action in a jsFiddle.
Now you can add as many tweet containers as you want to your page--and your javascript doesn't have to change one bit. Other solutions that require knowledge of specific ids linking to specific ids are suboptimal.
Note the descendantof pseudo-selector is custom (see the fiddle to find out how it works). Also, since you didn't provide any css, I had to choose some--it was quick so don't expect much. (Aww heck I just saw you updated your question to provide a jsFiddle with css giving a far prettier result--but I won't change mine now.) I did have to add a class to the actual tweet itself, but there is probably a better way to style it.
And if you want a click on the displayed toolbar itself (outside of a link) to allow collapsing the toolbar, change the code above to :descendantof(a).
If you don't want to change your page layout, another way to it is to encode the information about the linkage between html parts in the html itself using a data attribute. Change your tweetcontainer div to add a data attribute with a jQuery style selector in it that will properly locate the target:
<div class="tweetcontainer" data-target="#tb1">
You don't really have to remove the id if you use it elsewhere, but I wanted you to see that you don't need it any more. Then on document.ready:
$('.tweetcontainer').click(function () {
$($(this).data('target')).slideToggle('fast');
});
Here is another jsFiddle demonstrating this alternate technique (though it less elegant, in my opinion).
Last, I would like to mention that it seems possible you have a little bit of "div-itis". (We have all been there.) The toolbar anchor elements have unnecessary spans inside of them. The tweet name h1 element is inside a div, but could just be an h1 with class="name" instead.
In general, if there is only a single item inside a div and you can change your stylesheet to eliminate the div, then the div isn't needed. There are an awful lot of nested divs in your html, and I encourage you to remove as many of them as you can. Apply style to the other block elements you use and at least some, if not many, won't be needed.
I'd suggest (though currently untested):
$('div[id^="tc"]').click(function(){
var num = parseInt(this.id.replace(/\D+/g,''),10);
$('#tb' + num).slideToggle("fast");
});
Though given that you don't need the num to be a number (it'd be fine as a string), you could safely omit the parseInt().
Yes, you can write this code much more compactly like this:
$(document).ready(function() {
for (var i = 1; i < 3; i++) {
$("div#tc" + i).click(function() { $("ul#tb" + i).slideToggle("fast"); } );
}
});
I'm new to jQuery so please be patient. I want to create a text caption that slides down on an image when you hover over a link on the page. I can do this when there's just one image with one caption but I have several images with different captions on one page.
I would like to create one function that can handle all of these in seperate instances and not create a function for each image/textcaption. The reason being is that the images and text is dynamic and changing in quantity overtime.
Please see an example of the code below, the .portText is a class of about 7 instances, when I hover over .moreInfo the text for every image slides down. I understand why this is happening, and I think I need to use ($this) somehow, but I also think i need to connect the picture to the text differently that it's done here. Hope this makes sense. Can anyone help? Cheers!
$(function() {
$('.moreInfo').hover(
function() {
$('.portText').slideDown('slow');
},
function() {
$('.portText').slideUp('slow');
}
)
});
You can refer to the element that was hovered over using $(this).
The way I usually do this is to make portText a child of the moreInfo div:
<div class="moreInfo">
<div class="portText">
....
</div>
</div>
Then instead of just $('.portText') you can do $('.portText', this) (i.e. all portTexts that are children of the hovered element).
Edit: Another way to do it would be to use the data attribute and give each portText an ID:
<div class="moreInfo" data-id="1">....</div>
<div class="portText" id="portText-1">...</div>
Then for Javascript:
$('.moreInfo').hover(
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideDown('slow');
},
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideUp('slow');
}
);
I have an html page (django) that contains several divs(each displaying different data) and one div that has navigation links. I'll call this my main page. I have an external .js file (jQuery) that reveals one display div on the main page and simultaneously hides all of the others (except the navigation div) based on which nav link is chosen.
$(function(){
$("#sl_sectorbr").click(function showSectorMini(){
$(".minimenu").hide();
$(".minimenu > *").hide();
$("#sector_mini").fadeIn("slow");
$("#sector_mini > *").fadeIn("slow");
});
All of this works fine. My question is, if I want to place "navigation links" on a second html page; that when clicked would both load my main page AND call/execute a specific function like
"showSectorMini()" just as if it were clicked from the main page itself — how would I write that code? I'd really appreciate any help I could get.
Oh.... existing class is...
}
/* ------- Interaction Containers Class -------- */
.interactContainers {
padding:8px;
border:#999 1px solid;
display:none;
}
But you probably already knew that!
Steve
Gentlemen...
This is exactly what I need and mine is less complicated than this. Just one div to open with the script. I am a javascript incompetent person so far. :(
How do you dumb this down to my needs?
Seperate page link is:
Email</div>
Page it goes to code is:
function toggleSlideBox(x) {
if ($('#'+x).is(":hidden")) {
$(".interactContainers").slideUp(200);
$('#'+x).slideDown(300);
} else {
$('#'+x).slideUp(300);
}
}
and the div is this...
<div class="interactContainers" id="interactContainers" style="background-color: #EAF4FF;">
I just want to click the link (Email) from one page...have it open the correct persons(id) profile page...and then execute my existing toggleSlideBox javascript.
Is that doable without a bunch or re-code with javascript that I have about an IQ of 4 in. :\
Thank you for any assistance you provide
S
You could use the hash - link to http://example.com/#sectionOne and read the hash in your ready function.
As SidneySM suggested, a hash is the standard way of handling this. It could go something like this:
In your external js file:
var initSectorUI = function(){
if (location.hash) showSectorMini(location.hash);
};
var showSectorMini = function(sector){
$('#sectors > div').hide();
$(sector).show();
};
On your other pages:
$(function(){
initSectorUI();
$("#navigator a").click(function(){
showSectorMini($(this).attr('href'));
});
});
<div id="navigator">
One
Two
</div>
<div id="sectors">
<div id="one" style="display:none">A one</div>
<div id="two" style="display:none">A two</div>
</div>
You should arrange to produce different versions of the page, and put different onload actions into each version. For example, make the div to show a query parameter, and make django fill in the right onload depending on the query parameter. Then put the different query parameters into the links.
OK, I'm designing a site and thought I'd stick some jQuery in as I really need so js experience.
Page with my problem is here: http://new.focalpix.co.uk/moreinfo.php
JS in question is:
$(document).ready(function(){
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideUp('slow');
var id = $(this).attr('href');
$(id).slideDown('slow');
return false;
});
});
This works fine, but if you click on a link where the answer has already slid down, then it slides up, then back down again.
I'm not sure on the cleanest way to stop this happening - any ideas?
You should be using the .slideToggle() effect.
$(document).ready(function() {
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideToggle('slow');
});
});
First, I'd suggest the following structure for your faq's:
<div id="faq">
<div class="qa" id="faq_greenandflies">
<span class="q">What is green and flies</span>
<div class="a">
Super Pickle!
</div>
</div>
<div class="qa" id="faq_redandbadforteeth">
<span class="q">What is Red and bad for your teeth</span>
<div class="a">
a Brick
</div>
</div>
<!--
More FAQ's here
-->
</div>
and then defining your jQuery as follows:
<script type="text/javascript">
$(function(){
// hide all answers
$('div#faq .qa .a').hide();
// bind a click event to all questions
$('div#faq .qa .q a').bind(
'click',
function(e){
// roll up all of the other answers (See Ex.1)
$(this).parents('.qa').siblings().children('.a').slideUp();
// reveal this answer (See Ex.2)
$(this).parents('.qa').children('.a').slideDown();
// return true to keep any other click events
return true;
});
// check location.hash to see if we need to expand one (direct link)
$(location.hash).find('.q a').click();
});
</script>
Explanation:
(Ex.1)
this is the link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
select all of its siblings. (we now have all qa's as a jQ object)
hide the answers
(Ex.2)
this is the line or link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
reveal the answer
A working demo is here.
This does several things for you:
If a user deep-links to an answer, the answer is automatically revealed
If a user clicks on one answer, all other answers are hidden
You can give your divs proper ids, so which helps search engine optimization of links to individual answers
Use slideToggle() like Soviut said, but just as a tip -- you can declare the display property in the actual CSS file instead of declaring it inside the javascript. jQuery will pick up on the fact that it is hidden in the stylesheet and still perform the appropriate slide function.
You can also use $(".answer").hide();
Instead of setting the display CSS property. Just thought I would let you know.
try using the one method, something like:
$(selector).one('effect', 'data for effect', callback function);
it makes sure an effect only happens once per element.