I am attempting to create a floating draggable div, something very similar to all those rather annoying banner ads that have started to appear all over the net (dont ask it just has to be done) This code :
works perfectly (ish) in IE 6.0.2, but I have two and a half problems problems :
Problem 1
It renders correctly in Netscape 7.1 and Firefox 0.9.1 but I cannot get the click-drag-drop effect to work in these browsers.
Problem 2
A "move" cursor is displayed when the user mouseovers the title bar, if they click and drag you get a nasty flashing cursor effect as it transitions between a "move" and "pointer" icon. Can't say if this also happens in other browsers due to problem 1.
Problem Half
How can I position this popup div so that it renders itself in the middle of the browser window? I spent some time looking at CSS positioning on w3c but didnt really find anything.
Can anybody point towards how I can solves these 2.5 problems?
While I am here, I had to "imaginer" a way of acheiving a cross browser compatible gradient effect for the boxes title bar. Basically I set a background image and tiled it. This is becuase there doesnt seem to be a Mozilla etc version of IE's "progid:DXImageTransform.Microsoft.Gradient...". Does anybody know if there is a better way of doing this?
EDIT :
After some research/fiddling with Problem 1 it seems that the onmousedown event is not captured therefore the mousedown/move/up methods are not executed. This leads me to believe that the problem is rooted in this line :
I'm using a bog standard script which reveals content when something is clicked. This script works fine everywhere else (or it did before I tweeked it a bit to get it to work on this one page; an easy thing to do), however, on this one page, it shows the content, but messes up the layout.
So when I load a page php grabs some results and formats them for the user. This shows properly in all browsers. However, when I try to use an ajax request to get more data and then format it, the same styling doesnt work. It is causing the text to appear below the image, not floated next to it. Also the dynamic styling works fine on Safari and Chrome, but not in Firefox (only mac tested) and IE. Here's my code code...
I found code on this site for creating popup divs, and got one such popup working fine. Trouble is, I can't figure out how to create multiple popups. I've tried duplicating the CSS piece, calling it layer2, and referencing it from the link piece, but nothing happens. Do I need to create a new javascript file for each layer?
I've got a scrolling text field that runs several pages deep, and I want to pop up multiple floating divs that will appear at the site of the text links (however deep in the scroll field). I can get multiple divs to pop by calling them layer1, layer2, etc. but they all pop relative to the position of layer1 (the only one specified in the javascript file). Is there a way to get each layer to appear next to the text link that fires it? code...
Is it possible to have a draggable div that will only be draggable between certain coordinates? in other words create a window through which the draggable div is visible and draggable. Would you use a stop drag when cursor hits a certain point? my div is a map and will be about 2000px by 2000px and want to have a fixed position and size of 500px by 500px so that that is all the user will see or be able to interact with. I know in image slider plugins that the divs scroll to the side or up and down through what appears to be a window so it should be possible?
I never have luck in toggling divs with javascript, to which I am new. Not even with a single browser, let alone making it compatible with all major browsers. Also, I lack experience with client side codes. Code:
I have a javascript function which I'm using to toggle on and off certain divs on a page when an object is moused over.
This function in turn calls another function (hideAllFriendNames) which hides any of the divs that might be already being displayed - as I only want one div displayed at a time: Code:
I am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?
I have a set of Div's which are all draggable, the coordinates of the div's are stored in a DB, so each time the page is reloaded the div's will have the same pos as they have when previous visitor left it.
There's one area on the page which uses the droppable function, when you place an div within the area the div, which is placed within the area. changes color.
My problem is that if a place a div in that area and then reload the page i find the div within the area but the div has the same color as if it would have when it's not located in the droppable area. In other words, It only changes color when I use the mouse to drag the div to the area not when it's positioned in the area with the coordinates from the DB.
I am trying to create some ajax/javascript to append the scriptaculous Draggable to a number of div elements with a className of draggable. The problem is i need to get the id's of each element to make them draggable, as simply making all div elements on the page draggable would effect other elements on the page which I dont want to be so.I need to:-
1.create a collection of div elements with className - draggable
2. make a list of all the element id's
3. make all elements with said id's draggable
I have left out the draggable part from the code, I have simply been trying to get the element id's to display so far
var dv; var dh;
dv = document.getElementsByTagName('div'); if (dv.className == 'draggable')[code].....
It works fine but I like to have the draggable div over the content div. I tried to set the position (in my css file) as "absolute" with "top: 1px" und "right: 1px" but then the div is no longer draggable. Also tried to set the z-index on 1 and 2 for the draggable div. It's not working..
On sorting out a drag&drop script. I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code.
I have this drag&drop script that moves some images around the screen, but I'd like to assign an event - document.getElementById("XXXXX").onclick = blablabla - to each of those images.
The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like.
I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function
I have the following piece of code in the head section of my page, which is the actual code for dragging the elements
In the above code i have a list of sortables, i want to add the draggable($obj) to a sortable, even though i add to the sortable in the add method, that gets added but does not play as a draggable,Do i need to call any method of sortable after adding the draggable ?
at the moment i work at a little "game" where the user of the website can drag arround divs. the function is
$ ( document )
[Code].....
and this works fine. the div containers contain transparent png images like circles, triangles an poligons are draggable by the user. but the whole div is draggable. it would be great if its possible to only drag the div arround while klicking on the image (triangle,...)
i have two div's that is drag'n'drop with[URL].. script for easy drag and drop. In div #1 i have a list of items that also is dragable and a list that is droppable in div #2 The problem is that if i move div #2 (also movable), the Jquery-code does not "know" that it moved and the droppable list is visualy in the right place but jquery thinks its in the upper left corner (where the start-place is), so i cant drop in the box. Making both divs movable
I want to use .css() to restyle list elements, I have 4 lists, they are connected. But I need to know where element dropped. I can read where it comes from with this code: ui.sender.attr('id') How can I know where it dropped?
This is the code if it's necessary; $(function() { $("#sol, #sag, #orta, #deaktif").sortable({ opacity: 0.6, connectWith: '.bagla', scroll: false, receive: function(event, ui) { var ComeID = ui.sender.attr('id'); alert(ComeID); //just for test }}).disableSelection(); });
Let's say I have two images. I make one dragable. I physically move one image directly over the other. While my mouse is pressed I release it. The image underneath recognizes and gives a message indicating it's covered by the other????
Is there some type of plugin available that can dynamically track and output x,y coordinates of a box I set using .draggable(). I'd like the coordinates to show inside the box as it is being dragged.[URL]...I wrote I simple scripts and I'd like to be able to drag any box I add and show the x,y coordinates inside of each one.
I'm not much of a programmer so I've difficulties getting the yellow windows at the following web address: [url] to drag and collapse correctly. Currently, the only window that works is the one with the red header. All the other windows should also be draggable and be allowed to close down.
So, basically I need to create the variable for this thing so that the nav windows work correctly. Problem is, everything I've tried has failed miserably to date.
Here's one I recently wrote that writes onclick to a draggable layer. You can write just about anything to it. It has a close box. You can have a border and a background color, or not. You can change the width and position from the link. Since there are 3 different ways of controlling the position (3 versions) and since it uses an external js file or two, I post a link.
