I'm using JQuery sortable list where I dyanmically I can modify the content inside each element (ie, textfield, color, etc). Either I indluce each element content as an iframe of div then this content is refreshed each time I move/drag and drop this element into another position. Which is weird is that it doesn't happend when I move another different element, so my question would be: is there anyway to avoid currentItem to be refreshed/reloaded after draggin it to another position?
Thanks in advance for your help (!)
This is a known bug. See: http://bugs.jqueryui.com/ticket/5575
Related
I have two forms that have to use the same IDs, etc. however, one is specifically for mobile viewing and the other for everything else. I am using media queries and display: none to show/hide each, but of course they are both technically still coded ON the page, which means neither of them work. So instead I am trying to think of a way to totally remove the element based on screen size. It has to be actually removed and not simply hidden.
I'm stuck and I need to get the site migrated by tonight. Any suggestions would be most appreciated!!!
Use the jQuery solution here to add a 'resize' event listener to window:
jQuery on window resize
In your event handler check the screen size (Get the size of the screen, current web page and browser window)
Use jQuery remove() to remove the element http://api.jquery.com/remove/
then append() to add the new one: http://api.jquery.com/append/
(only remove and add elements when changing from one size range to the other, not on every window resize)
What is the correct (fastest/safest) approach to showing an element with jQuery? Should I be checking first if the element is hidden before showing it or is it faster and just as safe to just go ahead and show the element and jQuery will take care of the rest (ie: do nothing if the element is already visisble)?
There's no harm in just calling .show, even if the element is showing.
I need to navigate to the element 'divElem1', on click of a button. Is it possible?
If we enter this link in browser, http://myUrl#divElem1, browser will navigate to the page and to the DIV element 'divElem1'. The same behavior has to be obtained through javascript.
The hash change will not work in my application, as there are other events will be fired on hash change.
So, the following will not work.
document.button.onclick = function () {
location.hash = "#divElem1";
};
document.getElementById("divElem1").focus() is also not working since the element is a div
You can use scrollIntoView for that:
document.getElementById("divElem1").scrollIntoView()
This doesn't give fine grain control over where exactly the target element will end up but it WILL be moved into the view-port. Even more, if the element is inside a scrollable container, both the container and the element inside it will be moved into a position so they are visible in the view-port.
If you want "plain" Javascript, use scrollIntoView(). But it really jumps to that position, see this question and answer.
Using jQuery, it can be done jumpy or with some easing, as explained here.
Easing is recommended to provide a better user experience and to let visitors see and understand what is happening.
When using TinyMCE (3.5.4.1) in IE9, if I place a DIV in my content, and if that DIV has either/both Height & Width specified, IE treats it, at least partially, as a contenteditable DIV.
This means when the user comes to edit such a document in TinyMCE the first time they click in the editor IE highlights the DIV in question, and allows the user to move it - which they often do by accident. They then have to click again to edit the content inside the DIV and while they do this the DIV is outlined on the page which is a distraction.
I have seen a number of posts (e.g. http://www.tinymce.com/forum/viewtopic.php?id=3939) saying that IE fires the "controlselect" event in this case and to place the cursor within the content and return false. I eventually managed to get this example to run, but while it suppresses the initial selection of the content it then seems to become random as to whether a given click inside the content places a cursor there or not.
Is there a reliable way to make IE handle this situation like the other browsers do i.e. with no unexpected side effects from adding height/width to a DIV?
I have got it mostly working as here http://www.tinymce.com/forum/viewtopic.php?pid=103272
And here http://www.tinymce.com/forum/viewtopic.php?id=29485
Its not perfect but seems as good as can get.
For this issue you could try to use object_resizing configuration parameter in your tinymce init
object_resizing: false,
I have a blog that consists of consecutive entries, ie. divs. I have a separate background image for each entry. I want to change background image when a specific div gets visible in the client window. I couldn't figure out how to trigger it.
I think this is not about :visible or .show, all divs are alredy visible. However the page is long due to consecutive entries and I just want to change background image when the page is scrolled and a div get in sight.
Note: A javascript solution would be better by the way, if exists... rather than jQuery
I think you need to bind a function to the windows scroll event and validate the div's when the event is fired.
$j(document).bind("scroll", function() {
//check here
});
I found where someone is offering a plugin for this sort of thing too: http://remysharp.com/2009/01/26/element-in-view-event-plugin/
--edit--
here is a similar question and answer:
Check if element is visible after scrolling