Javascript swap divs not working in IE 9 or less - javascript

I am trying to swap divs in IE 9 and less. But my javascript is not working. Can anybody help me out?
You can see my script here: http://jsfiddle.net/pny71Lqd/
Not sure why the JS is also not working on jsfiddle. It is working in my browsers (also IE), but when i try IE 9 or smaller it brakes down.
Find the code below:
<style>
body{ background:#f6f6f6;}
#container2 {
width: 926px;
}
#leftCol2{ float: left;
width: 300px;
background:#FFFFFF;
}
#rightCol2{float:left;
width:300px;
background: #FF9;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$(window).resize(function() { //Fires when window is resized
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width < 1024) {
$("#container2").each(function() {
var detach = $(this).find("#leftCol2").detach();
$(detach).insertAfter($(this).find("#rightCol2"));
})
}
else {
$("#container2").each(function() {
var detach = $(this).find("#rightCol2").detach();
$(detach).insertAfter($(this).find("#leftCol2"));
})
}
});
});//]]>
</script>
</head>
<body>
<div id="container2">
<div id="leftCol2">
<p>Div 1.</p>
</div>
<div id="rightCol2">
<p>Div 2.</p>
</div>
</div>
As you can see I try to swap around leftCol2 with rightCol2 when the screen is resized smaller than 1024. Actually I'd like also the divs to be swapped around when the page is just loaded (and not necessarily resized). Who can help? Thank you very much!

Seemed to be a problem with my emulator. Got a different one and it worked for IE9 and less!

Related

How fullpage to switch on/off when resize page?

Somebody know if it possible to switch on fullpage() when window.width > 700,
and switch it off when window.width less 700.
I need to switch off it on tablets and mobile.
mine wrong solution
`https://codepen.io/liashok/pen/ERXozv?editors=1111`
and error
"fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!"
You're going to need to track the state in a variable (whether it's been attached or not) and destroy the fullpage effect if you cross the boundary from >700 to <= 700. Try this.
$(function(){
var attached = false;//track it's current state
manageFullPage();
$(window).resize( function() {
manageFullPage();
} )
function manageFullPage(){
if( $(this).width() > 700 ) {
if(! attached){
$('#fullpage').fullpage();
attached = true;//note it's been attached
}
}else{//we don't want fullpage. destroy it if it's attached
if(attached){
attached = false;//mark destroyed
$.fn.fullpage.destroy('all');
}
}
}
});
* {
margin: 0;
}
.section {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
it was very simple, just type this:
$('#fullPage').fullpage({
responsive: 700 // here is solution
})
=D

Controlling image height in Bootstrap-Lightbox gallery

I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>
I solved it this way by editing the Javascript:
onContentLoaded: function() {
var imgh = $(".ekko-lightbox-container").find("img").height();
var winh = $(window).height();
if ((imgh+200)>winh)
{
$(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
}
}
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.

ScrollLeft returns to the the set position, sadly not working on Firefox

function scrollX(){
bodyWidthDif = 1100-parseFloat($('html').width());
bodyScroll = $('#top').scrollLeft();
if (bodyWidthDif > 0){
//#top is ID of BODY style element <BODY id="top">
$('#top').css({"overflow":"scroll","max-width":"1100px"});
if(bodyScroll > bodyWidthDif){
$('#top').scrollLeft(bodyWidthDif);
};
}else{
$('#top').css({"overflow-x":"hidden"});
}
};
$(window).scroll(function() {
scrollX();
});
I have a problem with the code shown above, it's not working properly in FireFox but working on IE10, Opera, Safari and Chrome. Code is designed to reduce the possibility of scrolling left to 1100px on screens with resolution lower than 1100px;
Problem already solved.
function scrollX(){
bodyScroll = $('body').scrollLeft(); //var for Opera Chrome and Safar
htmlScroll = $('html').scrollLeft(); //var for Firefox
if(htmlScroll >= bodyWidthDif){
$('html').scrollLeft(bodyWidthDif);
};
if(bodyScroll >= bodyWidthDif){
$('body').scrollLeft(bodyWidthDif);
};
};
But I took advantage of another solution - simple using CSS.
<body style="overflow: visible">
<div style="overflow: hidden; width: 1100px; height: 2000px; position: absolute;">
</div>
</body>

Liquid Layout IE Problems, of course (Newbie)

I'm new to CSS, never created a layout before and I'm having some issues with my first one in Internet Explorer. I think it looks good in Firefox though.
I have done a lot of reading about HTML and CSS before starting the layout so I knew IE had some bugs but even after making the layout and researching the issues none of the resolutions seem to be working. Im hoping someone here can help.
TL;DR: New layout not working in IE, need help(did research)
Problem 1: In IE the 2 right sidebars are too wide compared to Firefox. Everything else appears normal, just those 2 are too wide which is affecting the layout
Problem 2: When the window width is below 1024 it is supposed to switch from container1.css to container2.css effectively changing the container properties to better display in smaller resolutions. Works great in Firefox, but in IE it seems to remove the container period leaving the contents to flow throughout the entire window.
<HTML>
<HEAD>
<TITLE>My Liquid Layout</TITLE>
<link rel="stylesheet" type="text/css" href="LiquidLayout.css" />
<link id="container1" rel="stylesheet" type="text/css" href="container1.css" />
<link id="container2" rel="alternate" type="text/css" href="container2.css" />
<script type="text/javascript">
<!--
var css = "container1";
function changeStyle(styleSheet)
{
if(styleSheet == css)
return;
var selected = document.getElementById(styleSheet);
var current = document.getElementById(css);
if(!selected)
{
selected = current.cloneNode(true);
selected.id=styleSheet;
selected.setAttribute("href",current.getAttribute("href").replace(new
RegExp(css),styleSheet));
}
current.setAttribute("rel","stylesheet1");
selected.setAttribute("rel","stylesheet");
document.getElementsByTagName('head')[0].appendChild(selected);
css = styleSheet;
}
function windowSize()
{
var windowWidth;
var windowHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
if (document.body && document.body.offsetWidth)
{
windowWidth = document.body.offsetWidth;
windowHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth )
{
windowWidth = document.documentElement.offsetWidth;
windowHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight)
{
windowWidth = window.innerWidth;
windowHeight= window.innerHeight;
}
if(windowWidth < 1024)
changeStyle('container2');
else if(windowWidth >= 1024)
changeStyle('container1');
}
window.onresize = new Function("windowSize()");
//-->
</script>
</HEAD>
<BODY>
<div id = "container">
<div id = "header"><p id = "size"></p></div>
<div id = "content">
<div id = "menu">
<ul>
<li>About</li>
<li>Contact</li>
<li>Home</li>
<li>Video</li>
<li>Gallery</li>
<li>IGN</li>
</ul>
</div>
<div id = "sidebox"></div>
<div class = "column" id = "sidebar"></div>
<div class = "column" id = "main"></div>
</div>
<div id = "footer"></div>
</div>
</BODY>
</HTML>
The main CSS is:
body
{
background-color:gray;
margin: 0px;
text-align: center;
}
#header
{
width: 100%;
height: 200px;
background-color: yellow;
}
#content
{
padding-top:5px;
padding-bottom:0px;
padding-right:5px;
padding-left:5px;
min-height: 768px;
}
#menu
{
width: 66%;
height: 250px;
background-color: blue;
float: left;
}
#sidebox
{
width: 34%;
height: 250px;
background-color: red;
float: right;
display: inline;
}
#sidebar
{
width: 34%;
background-color: red;
height: 100%;
float: right;
}
#main
{
width: 65%;
height: 100%;
background-color: green;
float: left;
}
If anyone can please offer some advice on fixing these issues in IE I would appreciate it!
Any suggestions for improvement are welcome as well
You didn't specify which version of IE, so I'm guessing you've only checked the most recent version?
Add a doctype as suggested, and you should be ok in IE9, but if you're supporting other versions of IE as well you are going to want some way of targeting each version independently as they all have different and progressively worse bugs. Occasionally, something will work in IE7 but not IE8, but generally as you head towards IE6 your problems will multiply exponentially, especially with a liquid layout.
I'd recommend using Modernizr, which will add different class names to the HTML element depending on the version of IE in use. It also does a bunch of other stuff like making HTML5 elements styleable in older IE as well, so it is worth using, even without any of the other feature tests it offers. I can see you aren't using any HTML5 elements, but I don't know if that's your whole layout, or just the beginnings of it...
You'll probably also want to use Selectivizr so that most useful CSS3 features can be used in IE8 and below as well, although you need to use a JS library, such as jQuery for this, so it may or may not be useful. There isn't any CSS3 in your CSS, but again, your example could be much simplified
In terms of improvements to your code, you don't need to include HTML comments in your script tags <!-- and haven't since the days of like IE4 or something. Additionally, your should go at the bottom of the <body> (just before the closing </body>) for performance reasons, rather than in the <head>, and if you use the HTML5 doctype (which you can still use even if you aren't planning on using any HTML5 elements) you don't need to specify a type attribute on the <script> element. In JavaScript, the opening curly brackets should go on the same line as the function definition or conditional, so do:
if (condition) {
or:
function something() {
and not:
if (condition)
{
or:
function something()
{
This is usually ok most of the time, but it can produce bugs that are very hard to spot, so it is worth getting into the habit of doing it all the time. And when attaching an event listener, you don't need to specify new Function("function_name"), you can just attach the function directly:
window.onresize = windowSize();
Also, in CSS, zero values do not need to specify measurement units, so you can just have 0 instead of 0px...
If you have copy and pasted the entirity then your missing a doctype making IE render in quirksmode.
I would suggest adding the HTML5 doctype to the top of your document <!DOCTYPE html>
More information on quirks mode can be found here

jQuery getting the margin-top needed to put element on the top of the screen

I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property.
It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
This is the html document that shows the error (you just comment out the "evilFloatomoton" div below to see it working properly)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
So instead of being against the top edge like I thought, it's halfway down the page in my tests. Can anyone help me?
For your scrollingDiv container, set the style to Position:absolute and top: 0px. That should keep your floating div in one spot.

Categories