I'm trying to create a simple drag and drop web application using jquery.
everything so far works as it should.
now what I am trying to do is to add a button to the page so when its clicked, it will FLIP the selected image and I am not having any luck with at all.
I have created a jsfiddle so you can see it for yourself: http://jsfiddle.net/7btkn17q/8/
drag and drop a book image onto the box bellow it and click once inside it, and you will see a button appear at the top of it which says flip.
I need to use that button to flip the selected image.
for that I used this:
$('#flip').click(function(e){
if( $(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000');
}
});
but this does not have any affect on the image(s) at all. I know that the code above is not for flipping the image(s). i just created that code as a test to see if I can access the image(s) on button click with no luck.
could someone please advise on this?
EDIT:
EVEN though I thought this would work, it didn't and I am so confused on why it didn't work:
$('#flip').click(function(e){
if($(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000');
}
});
Second Edit:
I've tried to use the remove() function to see if i could get the img and somewhat I could make it work but similar to the answer bellow, it will remove ALL the img's instead of removing the selected only:
$(e.target).parent().siblings(".drag" ).find(".img" ).remove();
is there any way to apply the CSS or remove() to the selected element only?
When selecting an image, you can set a class to it. Let's add selected to it.
When selecting another image we just remove the selected class from other elements and add it to the one we just selected.
Here's my fiddle
Another problem I noticed, was that you were trying to test this by changing the border of the selected element. When you click the flip button, the image gets unselected and the border is changed to medium none (Remember, firebug/devtools are your friends.).
So I changed it to change the outline css property to see that the button works.
You also might want to update from jQuery 1.6 as the event handling is so much easier with the .on() function.
'.closest()' only travels up the DOM tree; you'll need to do something like this to target the images:
$('#flip').click(function(e){
if( $(e.target).parent().siblings(".drag").length > 0 ) {
$(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000');
}
});
updated jsfiddle: http://jsfiddle.net/7btkn17q/9/
Related
I have an interface that you can press edit to bring up borders and change the background color of other divs. The edit button gets replaced by cancel and save buttons. I want the borders and background to change on clicking edit and revert to normal on clicking save or cancel.
I am able to make the divs change when clicking edit, but I can't make them change back on clicking cancel or save. I'm using the exact same Jquery function for both.
//show lines on clicking edit
$(".editbutton").click(function() {
$(this).parent().find(".material_input").css("border-bottom", "1px solid #ccc").css("background-color", "#fafafa");
});
//hide lines on clicking save or cancel
$(".label-container button").click(function() {
$(this).parent().find(".material_input").css("background-color", "#fff");
});
I know that my second one doesn't include the border. I'm just trying to get the background back to white first.
Edit: It looks like there's a problem with the second function accessing the DOM because I can do this easily in Codepen. If someone can help me straighten this out that'll be great.
Here's the DOM for the relevant classes:
.parent > .editbutton
.parent > .button-wrap > .label-container
.parent > .section > .fields > .material_input
Based on the updated question, it seems changing $(this).parent() to $(this).parents('.parent') inside the click handler for save or cancel button should solve this.
use classes instead .css function that you can remove class when you click cancel or add more function if this has class
I'm using this script to style checkboxes and radiobuttons and it works fine:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The problem is when I add checkboxes and radiobuttons dinamically to the page using jquery. These newly created items don't get styled.
Does anyone know a way around this?
EDIT:
I'm adding the new checkboxes dynamically using this:
dropdown.change(function () {
$('#template').tmpl(data).appendTo('.container'); //here the new elements get added
Custom[init](); //THIS DOESN'T TRIGGER
});
I'm not sure how Ryan's script works, but I've worked on a lot of projects that involve custom radio buttons. Typically what I do is, use CSS and set the opacity of the radio button to zero.
input[type='radio'] {
opacity: 0;
}
Next, I wrap the radio button with a span tag with a class something like .checkbox.
Now you should be easily able to attach an event to show/hide a background image.
See complete demo: http://jsfiddle.net/07x4zr79/
I'm not a big fan of using scripts to do things, when you don't.
So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.
Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent
Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.
You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.
I am using jQuery and Twitter Bootstrap, and want to have a tooltip appear when hovering over a link. However, the tooltip doesn't appear the first time I hover over a link, but if I move the mouse away and back on, it works every time for that link.
I have several of these on the page:
Full Name
I've created a jsFiddle to demonstrate: jsFiddle. Any help would be appreciated - thanks in advance!
What's happening is that you're instantiating the plug-in on the element when you mouseover it the first time, and then the plug-in works as expected on subsequent mouseovers on that element.
Using the configuration suggested in the docs works (see fiddle):
JavaScript:
// tooltip demo
$('div').tooltip({
selector: "a[data-toggle=tooltip]"
})
HTML:
<div style="text-align: center; width: 100%; margin-top: 50px;">
Full Name <p/><p/>
Full Name<p/>
Full Name<p/>
Full Name<p/>
Full Name
</div>
.tooltip() functions initiates the tooltip effect on the link, not show the tooltip
Explanation:
When the $(this).tooltip() is triggered on the first hover, it instantiate the plugin first. Then finally on the second hover you get the tooltip.
Solution:
Add this on your code:
$(function() {
$("a").tooltip();
});
Solution (JSFiddle)
I had the same issue with a tooltip on a button. It turned out that the tooltip didn't show because the button was disabled the first time. There was code FOLLOWING the attempted to show the tooltip that checked some other values and enabled the button. After the first "run" the button was enabled so on the second and subsequent events the tooltip did/does show. I simply moved the "enable" code before the code that attempts to show the tooltip and my problem was solved.
I think it would be cleaner if you let JQuery handle the mouseover event, and put all your codes inside $(document).ready
Similar issues and solution can be found here:
Jquery onmouseover triggers on second event
New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them
Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm