I have an image that is linked that is contained by a div. I want to be able to drag the linked image to a tinyMCE control without its surrounding DIV.
HTML:
<div id="image_preview"><img src="someimage" /></div>
For whatever reason it's dragging the DIV along with the IMG and A. Is there a way to get it to not drag the DIV. I've tried preventing default ondrag, onmousedown etc. on the DIV, but then nothing drags.
I've tried:
$(document).ready(function(){
$('#image_preview').on('mousedown', function(){
return false;
});
});
and:
$(document).ready(function(){
$('#image_preview').on('dragstart', function(e){
e.preventDefault();
});
});
and a couple of other things, but of course I knew none of those would do anything other than prevent dragging of anything within the DIV.
HTML:
<div id="image_preview"><img src="someimage" /></div>
<div id="anotherdiv"></div>
jQuery:
$(function() {
$( "img" ).draggable({
stop: function(event, ui) {
$(this).appendTo('#anotherdiv');
}
});
});
Change your markup to this:
<div draggable="false"><img src="someimage" draggable="true" /></div>
You should be able to prevent IE's default dragging bahavior by using something like this:
document.ondragstart = function () {
return false;
};
I had this problem when making a drag & drop image pane to use alongside TinyMCE. This solution worked for me using Firefox's native drag & drop: Instead of wrapping the img tag with a td, tr, etc. as mentioned above, I placed a tiny comment before the image: . This was enough for it to exclude the parent element in the drag & drop, which was a DIV. I hope this helps someone!
Related
I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>
Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle
There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});
Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});
I have a strange problem, stemming from a layout that I cannot change to better solve this.
Basically I have a menu like so:
<div id="hornav">
<ul class="container">
<li class="item1">link</li>
<li class="item2">link</li>
</ul>
</div>
And I have drop downs separated like so:
<div class="dropdowns">
<div id="ditem1" class="dropdown-div">content</div>
<div id="ditem2" class="dropdown-div">content</div>
</div>
What i need to do is make the links hover to show the container. I can do this but I also need to make it so if I move my mouse over the drop down that shows, it does not disappear.
Because of the way the site is running, and what tools I am limited by I cannot make the dropdowns inside of the li elements (It is dynamically generated by the CMS, without any options) - This point is extremely important.
Right now this is the javascript code i am using. It functions to an extent, though IT is very buggy (If i hover over the contained element, then hover back it vanishes). This code may be slightly outdated as I have been gradually trying multiple methods, and reading up on this problem with little success.
function dropdown(event,passDown){
var classes=$(passDown).attr('class').split(' ');
for(var i=0;i<classes.length;i++){
if(classes[i].indexOf('item')!=-1){
var classId=classes[i];
}
}
var elem=$('#d'+classId);
event.preventDefault();
if(!elem.hasClass('active')){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
$('#d'+classId).addClass('active');
$(passDown).parent().addClass('active');
}else{
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
}
}
$(document).ready(function(){
$('#hornav>ul>li[class*="item"]:not(.item20)').each(function(){ //trigger all drop down links
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
if(event.relatedTarget.id.indexOf('ditem')==-1){
dropdown(event,this);
}
});
});
$('.dropdowns .dropdown-div').each(function(){
$(this).hover(function(event){
event.stopPropagation();
console.log(event);
var setIt=this;
//if(event.offsetParent.className.indexOf('item')==-1){
$('#hornav li.active,.dropdown-div.active').each(function(){
$(this).removeClass('active');
});
//}
});
});
});
EDIT:
We have decided to take another approach and are going to use clicks instead of hovers witch will not cause the problem.
I will leave this open for now, as it seems like a question that could help others out.
EDIT 2:
Never solved this and ended up coming up with another completely different solution. However I feel this question may help people in the future so I will leave it open if anyone wants to answer it.
for each child element, fire the events on the parent element:
jQuery(el).on('mouseenter mouseleave', function(e) {
jQuery(this).parent().trigger(e.type);
});
I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.
If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>
this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div
I've been trying to use ondrag() and some other functions on a div rendered dynamically on an HTML page.
None of these events seem to fire, nor do I get any errors. I can't find much helpful documentation on it either. Am I interpreting it wrongly, can you use these events to script functionality to drag a div around the screen?
Have a look at this documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
Note: It does not work in every browser.
If you want a cross-browser support use jQuery: http://jqueryui.com/demos/draggable/
jQuery example:
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {}
});
});
</script>
Another example:
<div id="toBeDragged" draggable="true">
This text <strong>may</strong> be dragged.
</div>
<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>
I haven't used drag myself much but I believe it's the drag "edit action" - eg selecting text and dragging it within a textbox/textarea.
You may need to implement your own onmousedown() onmouseup() and onmousemove() handlers for the functionality I think you're after
Short answer: <div>-s are not draggable by default, unlike <a>-s. You must add draggable=true:
<div draggable=true ondragstart=...>HTML</div>
Works on Firefox 75 like that.
Is there content in the div? I don't think it's the element itself that gets dragged in this particular event.
An easy way to do this is with jQuery UI, make sure you use it after your dynamic div has been rendered.
$(document).ready(function () {
$('.my_draggable_elements').draggable({
drag: function(){
// do something
}
});
});
I'm trying to create a function which will add an overlay to a thumbnail image when you hover over it and remove the overlay when you leave it. Here is my HTML...
<div class="thumb"><img src="i/testThumb.gif" /></div>
And here is my jQuery...
$('.thumb').live('mouseover', function(event){
if($(this).find('.overlay').length == 0){
$(this).prepend('<div class="overlay"></div>');
}
return false;
});
$('#galleryPanel .thumb').live('mouseout', function(event){
$(this).find('.overlay').remove();
return false;
});
The trouble is that when the overlay is created the mouse is already over it and that triggers the "mouseout" of the container, which removes the overlay, and it cycles continuously flashing on and off.
Is there an easy solution to this?
I you put one more div into the mix, I think you may find what you are looking for.
<style>
.hover { display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".image").hover(
function(over) {
$(this).find(".hover").animate({opacity: "show", top: "55"}, "slow");
},
function(out) {
$(this).find(".hover").animate({opacity: "hide", top: "55"}, "slow");
});
});
</script>
<div class='image'>
<div class='imageClass'>
<img src='img1.jpg' />
<div class='hover'>
<img src='img1.jpg' />
</div>
</div>
</div>
Instead of binding mouseout to ".thumb" trying binding it to ".overlay".
$('#galleryPanel .overlay').live('mouseout', function(event){
$(this).remove();
return false;
});
This might sound a little hacky, but you can use a variable (in the case of a dom element, I'd use a css class) to know if this is the first time the event is firing on this element.
Basically, your function looks for the presence of this css class on the dom element, but it's not there by default when you create it. If it's not there, add the class and exit the function. If it is there, the hit is valid and you should execute your overlay functionality. Since you can have multiple classes on a dom element, this shouldn't cause any conflict with any other classes used for styling. I'd say go with a class instead of a custom attribute because custom attributes make your html "invalid" to search crawlers.