i think the title is pretty self explanatory.
I have many divs generated from php code that take products from database.
the problem is when i drag them between two containers(also divs) i cant return all of them back to the first container because the products div id is same and it takes it as repeat from container 1 --> 2 and not backwards from contaner 2 --> 1.(2 containers have and all product divs have same id).
i can solve this by adding +1 to the divs id of the products(so they have different id) but that way i cant use the id from the css. Any solution?
here is the js code
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
if (ev.target.id == "container"){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}}
</script>
thanks in advance
ID must be unique for the HTML to be valid. When you duplicate IDs, strange things happen. Even if you manage to get it working in one browser, others may handle things differently. You could try using classes instead.
You can't have two divs with the same id. Try using classes.
Your drop() function should be something like this:
function drop(ev){
if ( ev.hasClass('container') ) {
// do some stuff
}
}
You can add classes dynamically with jQuery .addclass() method.
i have solved this by using incremented id for the div generated by php. how ever tha was not one of the solutions i wanted.
thanks for trying to help
Related
I'm trying to on page load get my html table to load at a specific column, I wouldn't even know where to start with this.
I've uploaded it here to see a demo: http://jsfiddle.net/3EFqD/
I've tried this in my body tag:
onload=' location.href="#right_column" '
and added id='right_column' to the correct td but that didn't work
Trying to get it to load on the cell that is labeled "this one"
Here's a fiddle incorporating the width of the header: Fiddle
Again, a jquery solution, essentially the same as above but needs to subtract the header width to hit the right position. See the fiddle for where the id's are added
$(document).ready(function(){
var hw = $('#headerWidth').width();
var f = $('#scrollToMe').position().left - hw;
$('.inner').scrollLeft(f);
})
If Im right in thinking you want a specific column to be scrolled to on page load, the easiest way would be to use a library, e.g. jQuery:
$('.inner').stop().animate({
scrollLeft: $('#right_column').offset().left
}, 1000);
Demo Fiddle
You're trying to make it work in a similar way to using anchors- however this isnt possible for horizontally aligned content.
May be if you are trying to load some html code(like table) in the mentioned td(This one), as you mentioned add id=right_column to this td and then use the below jquery logic -
var newtable = '<table class="newtable">New table, this may be from ajax call also</table>'
$('#right_column').html(newtable);
How can I make a switchable table with buttons to lead to different view of another table? Something like this:
As you can see, once you click on the buttons it takes you to another table list.
Here is a base: http://jsbin.com/agavid/136/edit
Need something similar to this.
You can create several different tables and use a simple JS/jQuery script to show and hide the tables based on which button is pressed.
Essentially you would show all tables at start (for progressive enhancement), then hide all of them except the first one. Then when a button is clicked, hide all the tables and show only the one associated with that button.
Here's a demo of what I'm talking about. http://jsfiddle.net/7Ywbn/2/
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
Hope I understood your question correctly.
here is a suggestion
wrap each table in a <div id="table1"> <div id="table2"> etc.. and hide them all by default. here is some help on that: hiding div using js
and then only show the <div> for the table associated with the button the user has clicked on. you can do this using javascript, jquery as a couple examples.
you may need to start looking into learning some basic javascript/jquery if you don't already know any, you are going to need it.
good luck.
You could create multiple divisions within the same file and hide all the divisions except the primary you want to display during the initial page load. then use "onClick='showNextDiv();" inside the buttons themselves.
A sample of the javascript would be:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict()
function showNextDiv() {
document.getElementById('DivName').style.display = "block";
document.getElementById('FirstDiv').style.display = "none";
}
</script>
All this is saying that when someone clicks on a button this script runs and displays the 'DivName' div. That's what "block" means. It also turns off the division "FirstDiv" by using the "none".
You can add as many "block" and/or "none" statements to the script. If you have 6 divisions you would want to display one and turn off 5.
I hope this is helpful. I'm not an expert at this but it works fine for me.
I'm new to the use of jQuery so the problem I'm facing should be fairly straight forward. Basically what I'm trying to accomplish is load a variety of simple text-only pages within DIV elements of my site, and with a navigation bar hide/unhide these individual DIVs.
DIVs are correctly loaded the requested pages using an script block. However, what is not working correctly is toggling the visibility of these DIV blocks. I've narrowed it down to a jQuery function I've created which blocks the entire script call whenever I refer to any of the DIV blocks. Let me explain better with a code snippet.
This is is some very simple code that, on the click of a menu link, runs a hide function then shows the corresponding DIV element.
$( document ).ready(function()
{
console.log("document ready."); <-- does NOT get called with hideDivs()
$('#button1').click(function(){
hideDivs();
$("#page1").show();
});
$('#button2').click(function(){
hideDivs();
$("#page2").show();
});
});
This is the hideDivs() function, JUST above the ready function:
function hideDivs()
{
$("#page1").hide(); <-- These lines cause the entire
$("#page2").hide(); <-- <script> block to note get called.
}
Finally, page1 and page2 are created with a script block halfway inside the page:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
$("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>
Why then is it that the top SCRIPT block fails with the hideDivs() function? I've tried placing it inside the $( document ).ready function with no change. Again, if the function is blank, or contains something simple like 'console.log' it works, but when referring to DIV tags it breaks.
Even stranger, the code that makes the function FAIL, WORKS if I simply rewrite the code as such:
$('#button1').click(function(){
$("#page1").hide(); <-- This works fine
$("#page2").hide(); <-- (page1 repeated to match function code)
$("#page1").show();
});
I have quite a few pages so I would much rather be able to use a function as not to have lots of repetitive code.
I have no errors displayed in my javascript console. I've looked closely at functions calls with StackOverflow and Google searches but couldn't spot a solution. I'm sure I've made a really silly mistake I'm overlooking, so any help would be much appreciated.
So instead of the whole function to hide your divs, you can simply put a class on each one and hide them by selecting that class. For example, each page Div give a class="clickablePages", and then do:
$(".clickablePages").hide();
that will simply hide all the divs that you have added the class to.
As for repeating all the button clicks for each button, you can simply do it in one function based on the id of the button. You can again put a class on all of the buttons as well, trigger the function by selecting the class and then grab the id you need within that function. something like this:
$('.buttonclick').click(function(){
var pageID = $(this).attr('id');
$("#page" + pageID).show();
});
In this case, if your buttons just had an id of '1' or '2' that matched the page number, it would only show the div for that page number. Hope that makes sense.
I have an implementation of using drag and drop for upload purposes using examples from http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
This is what it looks like when it works.
Before drag and drop: http://cl.ly/image/0c3f1m0M2K2D
After drag and drop: http://cl.ly/image/0Z131N333n0L
The droparea is a div that I call dropArea.
Now the problem is out of the supposed 4 images I have drag-n-dropped, I then wished to select two of them to be of a special status. For eg, I want to inform the server that image 1 and 3 are to be sneaks.
I want to be able to drag and drop image 1 and 3 already in the div element into 2 drawn divs
http://cl.ly/image/3T3O410X2E40
I realize I am not able to do this so far.
Main reason being that I am unable to add in the ondragstart attribute to the images created in the dropArea div.
I am able to add in the draggable attribute.
So I get html code that reads like this after I drag and drop into dropArea div.
Can I get the effect the way I want it as described?
if not, are there alternative ways to achieve the same outcome without using drag and drop? Perhaps right click on the drag-n-dropped image and select them as sneaks?
UPDATE:
I realize I needed to add an id attribute, so now the drag and drop effect of another drag-n-dropped image inside dropArea works.
But I want to drag and drop a copy and not the original image. Hence I still need help with this.
I realise this question is over 4 years old, but maybe someone else might also need this information :)
So as shrishaster asked in the comments on Kim Stacks answer:
"How can i do same thing for Texts instead of Images?"
The fix for this is a minor tweak on the dropcopy function given by Kim Stacks:
function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("p");
var original = document.getElementById(data);
copyimg.innerHTML = original.innerHTML;
ev.target.appendChild(copyimg);
}
By doing this you make a clone of the original paragraf content :)
I hope this will help at least some.
there are 2 parts to this answer
Ensure that you assign an unique id attribute to the drag-n-dropped image
Use the following javascript functions copied from http://www.w3schools.com/html5/html5_draganddrop.asp but include a new one called dropcopy
These are the functions from the w3schools example
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));
}
This is the new one for dropcopy
function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
}
Then for the div that requires a copy just make sure you use the dropcopy for the ondrop attribute
<div id="div2" class="sneaks" ondrop="dropcopy(event)"
ondragover="allowDrop(event)"></div>
There was a code I saw where it showed like 3 products and the product specs in table form, one right next to the other, and when you hover over a product, it kinda popped. It might have been jQuery, as opposed to HTML5 or CSS3 but I'm wondering if anyone knows what I'm talking about, and where I can find this code?
You can add a desired css style for elemet with id, say "popped".
and the script:
$(".product").hover(
function () { $(this).attr('id','popped');}
function () { $(this).attr('id','');}
);
and "product" is a class of your product tabs.