Jquery Drag and Drop problem, jump to a new page - javascript

I want to use Jquery to implement a page that contains js from quotemedia.com. After I embed the js into the sortable, when I drag and drop the element that contains the js, it jump to full page display.
This happens under Firefox, IE is ok.
The running code is here: http://jsfiddle.net/dodoflying/9BkJ5/ Please use firefox to drag and drop element shopping to see the problem.
Is is a bug under firefox? How could I solve this problem?
Thanks in advance!
Don

I don't know if it's a bug on FF or a bad implementation in IE, anyway if you don't have a problem put the JS in a seperate html and include the html page in an iframe you'll still see the iframe reloaded but not the whole page, refer for this link for more info.
iFrame reload on sortable
Edit: by the way, you don't need to connect the list to itself...it's already connected so this is not needed:
$( ".column" ).sortable({
connectWith: ".column"
});
Now back to the main issue, as you can see the iframe (or your code) will be reloaded each time you change it's order in the dom tree, so instead of using sortable..maybe you will be able to come up with a similar effect by absolutely position these DIVs and change their position (CSS top & left using JS) when dragging them but this would require A LOT of work.

I just found it could be solved by using Jquery to remove the following javascript
<script src="http://app.quotemedia.com/quotetools/miniCharts.go?webmasterId=93004&symbol='.$symbol_chart.'&toolWidth=660&chhig=130&chbg=ffffff&chln=333333&chgrd=D5DDE8&chxyc=2B5286&chtcol=2B5286&chbgch=ffffff&chbdr=2B5286&chfill=ee5E739B&chfill2=8BA9E0" type="text/javascript" language="javascript"></script>
Under both Firefox and IE, it is ok.

Related

Dynamically loaded Bootstrap Modal does not scroll on iOS 9

Scenario: The project I'm working on requires that content get loaded into a Bootstrap 3 modal asynchronously, with loading indication displayed to the user. The actual loading is not an issue (see my Codepen below), but what is an issue is scrolling on iOS 9 devices when the loaded content is large. It works correctly on every other device that I've tried, including iOS 8. I think the DOM doesn't update the 's scroll height, so it doesn't think the modal should be scrollable.
The only work-around I've found that reliably works (but is unacceptable) is to hide/show the modal's body, thus forcing a recalculation. Bootstrap's own handleUpdate function doesn't take care of the issue.
I've created a minimal example on Codepen at http://codepen.io/jkrehm/full/LpRzJV/ (code available here). I wish I could embed a QR code in my question so you could easily get to it on your phones.
The most relevant code is this:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this).find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal.modal('handleUpdate');
});
});
If I change the code so the content is loaded before the modal is shown, things work fine, but there's no loading indicator for the user (just a pause of indeterminate length after they click the button and before the modal appears).
Summary: What can I do to convince iOS 9 to recalculate the .modal-body's scroll height?
Update (Aug 15, 2017):
Apparently there is no satisfactory resolution to this issue. Bootstrap has chosen to remove -webkit-overflow-scrolling:touch from the modals and filed a bug with Webkit about it. Maybe it will get fixed someday, maybe not. For now, the provided work-arounds are the best "solutions".
CSS work-around:
.modal-dialog {
height: 101%;
}
Works by making it so that the dialog is always scroll-able, regardless of content size.
From: https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164
My co-worker and I were able to figure out a hacky work-around for this issue.
Using my code from above, something like this will make scrolling work on iOS 9:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this)
.css('overflow-y', 'hidden')
.find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal
.css('overflow-y', '')
.modal('handleUpdate');
});
});
Note the .css('overflow-y', ...) lines. That's the magic sauce. Instead of mucking with the actual CSS, though, we're using a class – .modal-scrollfix – that we add & remove to achieve the same results.
I've created a fork of my previous pen and applied the fix. http://codepen.io/jkrehm/full/OybdrW/ (code)
I have a ticket open with Bootstrap about this issue, but I'm not sure what they can do except add documentation. Hopefully Apple fixes the issue with a future version of iOS Safari.
I managed to fix this by adding the following line just after the contecnt was dynamically loaded via javascript :
$("div#myModal").css('overflow', 'auto');

Hide everything outside window HTML jQuery

So i made a website, basically first time messing around with jquery.
I have a div main-container which contains all the content. This main-slider slides in the window. i'd set it up by doing this in the document.ready function:
<script>
$("#main-slider").hide().animate({left:'+=2000', opacity:'0.0'},0);
$("#main-slider").fadeIn(100).animate({left:'-60', opacity:'1.0'},1000);
$("#inhoud").delay(100).animate({left:'-30', opacity:'1.0'},300);
$("#inhoud").delay(20).animate({left:'-5', opacity:'1.0'},300);
$("#main-slider").animate({left:'-40', opacity:'1.0'},150);
</script>
On normal browsers (tested with safari, chrome and firefox) it looks like how i want to but on mobile devices it starts zoomed out since the main-slider starts animating from +=2000;
Is there a way to hide the div when it's not inside the viewport ?
I made a jsFiddle with a basic concept of what i have, unfortunately it doesn't seem to work tho ;p sorry.
JSFiddle
A concept version of the website : http://paparashie.nl/woonkans
I'm not sure I am understanding correctly, but have you tried with css?
html {
overflow: hidden;
}
Apply this to html or body...
JSfiddle is not working, can you attach screenshot to help us see the problem

HTML Button Highlight With Jquery Not Working

I am currently in the process of building a web app. I am trying to get an image when clicked to change image source and then hide one div and show another. This seems to work fine when viewing within a browser but when viewed on an iPad the button image change doesn't work. An example of what I am currently doing is below:
$("#pg3rgt_en_GB").click(function(){
$(this).css("background-image","url(images/right-button-down.jpg)");
setTimeout(function(){
$("#introduction_en_GB").hide();
$("#pg3rgt_en_GB").css("background-image","url(images/right-button.jpg)");
$("#customerinput_en_GB").show();},250);
I hope that this is something simple I am missing. I appreciate any help and thanks in advance!
Safari doesn't recognise the show and hide features that jQuery has to offer. The best way around this would be to assign different css classes - which safari does recognise!

Have scrollbar scrolled to the bottom without using Javascript?

I am currently setting a scrollbar to show as scrolled to the bottom upon page load by using this jquery code -
$(document).ready(function() {
$('.mydiv').scrollTop($('.mydiv')[0].scrollHeight);
});
Is there a way to do this using only css? So that this scrollbar is automatically scrolled to the bottom when the user visits the page?
You can do this without javascript by using anchors in the URL and in the document, with you placing the target anchor at the bottom of the page. Though this is not really very elegant.
There is browser based extension that can help you with that.
Different browsers use different extensions:
Chrome, Safari: WebKit, IE: Trident, FF: Gecko.
Each one can have different ways to do that.
I don't know specific features of webkits, but try to google for example
::-webkit-scrollbar-track-piece:start
I know it is not a straigtforward answer, but I hope it will help you in your research.

Javascript breaking a page in Firefox 3.6

I'm using the jCarousel Lite jQuery plugin on a page, but it seems to be causing severe problems in Firefox 3.6. In that browser, the page briefly loads, and then all of the content disappears, except for one of the <li> elements that I'm using the plugin on.
The page in question is here. The code applying the carousel:
<script type="text/javascript">
jQuery(window).load(function() {
jQuery(".loopnetcarousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
(I was initially using (document).ready, but replaced that with (window).load after seeing that some people have problems with it in Firefox 3.6, but that didn't seem to change anything).
More information: If I stop the page load before all of the page content is replaced as described, everything works fine, including the carousel. Also, I tried replacing that carousel script with another one, and the same problem occurs.
Looks like the problem is the way that the loopnet.com properties are loaded. The loopnet.com scripts use document.write to create the carousel content. If you look at the Net tab in Firebug you will see that the loopnet.com scripts are all loaded twice. First when the page loads and then again when the carousel script is run. The second time it is run in Firefox the document.write just clears the entire page. A simple fix would be to just remove the script tags before setting up the carousel code. Example jsFiddle: http://jsfiddle.net/fqFH7/7/
$(function() {
//remove the scripts so that they are not executed again by the carousel code
jQuery(".loopnetcarousel script").remove();
jQuery(".loopnetcarousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
Try commenting out the remove() line in the jsFiddle and you will see the same problem as your site.
On the page you refer to, the following resource takes forever to load:
http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff
On the website for the plugin:
Based on popular request, jCarouselLite has been updated to support jquery 1.2.x versions. Goto the download page and download version 1.0.1 to enjoy jquery 1.2.x support. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.
Taken from: http://www.gmarwaha.com/blog/2007/08/09/jcarousel-lite-a-jquery-plugin/

Categories