IE Doesn't run remote JS properly but local runs fine - javascript

My page works in every browser except in IE 10. When I run this page locally in IE 10 there seems to be no problem whatsoever, only when I open the page remotely with IE 10.
The JavaScript is supposed to measure the div with main text and set the height and width of the div's that are off-screen. This is done wrong by IE 10. The width of these div's has to be set because otherwise the will not animate in properly when an item from the menu is clicked.
I did a check on deprecated functions but found none.
I checked the syntax and nothing wrong there. (as far as i can see)
The console in IE does not report any errors.
Anyone any idea as for why locally it works fine in every browser, but remotely the only browser that displays it faulty is IE?
EDIT:
I have removed the function brackets at init so the DOM can initiate, although this did not fix the problem.
script (embedded in the head of the page):
<script src="scripts/jquery-1.10.1.min.js"></script>
<script>
var mainTextDiv = null;
var animate;
var acc = 0;
var currentTab = "home";
var nextTab;
var working = 0;
var bar = 600;
var divW;
function init(){
onWC(currentTab);
document.getElementById(currentTab).style.width = 'auto';
divW = document.getElementById(currentTab).offsetWidth;
document.getElementById("home").style.width = divW + "px";
document.getElementById("profile").style.width = divW + "px";
document.getElementById("news").style.width = divW + "px";
document.getElementById("forums").style.width = divW + "px";
document.getElementById("webshop").style.width = divW + "px";
document.getElementById("status").style.width = divW + "px";
}
function onWC(tab){
var divh = document.getElementById(tab).offsetHeight;
document.getElementById('tabcontainer').style.height = ( divh + 50 ) + "px";
}
function moveDiv(tabName){
if (currentTab == tabName){
return;
}
if (working == 1){
return;
}
working = 1;
nextTab = tabName;
removeDiv();
}
function removeDiv(){
mainTextDiv = document.getElementById(currentTab);
mainTextDiv.style.left = parseInt(mainTextDiv.style.left) + (0.5+acc) + "px";
if (parseInt(mainTextDiv.style.left) > 2000){
mainTextDiv.style.left = 2000 + "px";
onWC(nextTab);
getDiv();
return;
}
acc += 0.15;
animate = setTimeout(removeDiv,10);
}
function getDiv(){
mainTextDiv = document.getElementById(nextTab);
mainTextDiv.style.left = parseInt(mainTextDiv.style.left) - (0.5+acc) + "px";
if (parseInt(mainTextDiv.style.left) <= 0){
mainTextDiv.style.left = 0 + "px";
currentTab = nextTab;
working = 0;
return;
}
acc -= 0.15;
animate = setTimeout(getDiv,15);
}
window.onload = init;
window.onresize = init;
$(function() {
$("#menu ul li a").hover(
function(){
$(this).css("background-color", "#525252");
$(this).css("color", "#FFF");
},
function() {
$(this).css("background-color", "#FFF");
$(this).css("color", "#525252");
}
);
});
</script>

Change window.onresize = init(); to window.onresize = init;
As it stands, the init() is trying to run immediately when the JS file is loaded, which is throwing the error because the DOM hasn't loaded yet.

Related

Efficiently creating a simple parallax effect with jQuery

So for one of my new projects, I decided to write a super simple parallax script for some background images on scroll. This is what I came up with:
$(document).ready(function(){
parallaxScroll();
$(window).bind('scroll', function() {
parallaxScroll();
});
});
function parallaxScroll() {
$(".parallax").each(function() {
if($(this).hasClass('reverse')) {
$(this).css("background-position","center " + (($(this).offset().top - $(window).scrollTop())/2) + "px");
} else {
$(this).css("background-position","center " + (($(this).offset().top - $(window).scrollTop())/-2) + "px");
}
});
}
My question is, is this efficient enough? If not, is there a better solution? I wasn't sure if using an .each() would be best for performance, but it seems to work fine. The reason I have the function run at document load is so when you scroll the page for the first time, the background image doesn't jump.
Instead of css which sets the value immediately, consider using animate instead. It defers setting values using timers/requestAnimationFrame, ensuring that your animation does not block the UI, is async (runs pseudo-parallel to other code), and ensures that the animation is smooth.
This is a plain JS solution, but you'll be able to port it to jQuery really easily:
var lastScrollY = 0;
var backgroundImageY = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.msRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame;
window.addEventListener('load', processScrollEvent);
function processScrollEvent() {
var innerHeight = window.innerHeight;
var scrollHeight = document.body.scrollHeight;
var backgroundImage = document.querySelector('#background img');
lastScrollY = document.body.scrollTop;
var currBackgroundImageY = Math.round(((backgroundImage.scrollHeight - innerHeight) / 100) * ((lastScrollY / (innerHeight - scrollHeight)) * 100));
if(currBackgroundImageY != backgroundImageY) {
backgroundImageY = currBackgroundImageY;
requestAnimationFrame(processScrollAnimationFrame);
}
}
function processScrollAnimationFrame() {
var backgroundImage = document.querySelector('#background img');
var transforms = ['transform', 'oTransform', 'msTransform', 'mozTransform', 'webkitTransform'];
for(var i = 0; i < transforms.length; i++) {
backgroundImage.style[transforms[i]] = 'translate3d(0, ' + backgroundImageY + 'px, 0)';
}
}

jquery function doesn't trigger

My resizeAreas function doesn't trigger in $(document).ready function. Here's the link to the app. I have also tried $(document).load but same result.
This problem is not consistent. But most of the time the page doesn't load correctly. If the list of task have the same height and 4 equal(as height) lists on the row then they are loaded correctly else they're not. To make sure that you see how it must look you can move a task element from one list to another. I don't have the reputation to post images.
Here is most of the javascript code:
function makeDropArea() {
var widthArea = $(".taskListing").width() / 2 - 55;
var heightArea = $(".taskListing").height();
$('.dropArea').width(widthArea);
$('.dropArea').css('margin-left', 5 + 'px');
$('.generalInfo').css('margin-left', 5 + 'px');
$('.generalInfo').css('width', widthArea * 2 + 220 - 45);
$('.subTaskHeader').css('width', widthArea + 25);
}
function makeDropElement(){
var widthEl = $('.dropArea').width() + 25 ;
$('.task').width(widthEl);
}
function taskListingSize(){
var width = getWidth();
var height = getHeight() * 80 / 100;
$('.taskListing').css('width', width);
}
function resizeAreas() {
$('.taskListing').each(function(){
var highestBox = 0;
$('.dropArea', this).each(function(){
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$('.dropArea',this).css('min-height', highestBox);
});
}
$(document).ready(function () {
menu();
taskListingSize();
makeDropArea();
makeDropElement();
resizeAreas(); //<-- this is the one with the problems
$(".dropArea").resize(resizeAreas());
$( window ).resize(function() {
taskListingSize();
makeDropArea();
makeDropElement();
});
});
Thanks.
Update 1:
I've done some more testing and this bug is only on chrome and firefox but not on IE. The problem appears only on the openshift platform.
Either change:
$(".dropArea").resize(resizeAreas());
To:
$(".dropArea").resize("resizeAreas");
Or:
$(".dropArea").resize(function(){
resizeAreas();
});
I think it should be
$(".dropArea").resize(resizeAreas);
Or
$(".dropArea").resize(function(){
resizeAreas();
});

How to create a Right Click customized menu on li item in HTML

My requirement is that i want to open a right click customized menu on particular li item. I got a js file from
http://lablogic.net/index.php#scripts/contextmenu/right-click-menu.php
URL but in this js file right click works on whole page but i want it to work only some li or a tags. When users right click on particular li or a tag at that time this right click menu opens and if user clicks anywhere else then it hides and open normal right click menu.
Please help me out .....
For reference.. Like http://www.dropbox.com or http://skydrive.live.com etc....
For starters, I don't exactly know which effect you would like to achieve, but I'll asume it's a menu like in skydrive when you click on files and directories.
There is probably a lot of solutions to this, but I can stick with yours found code. First things first - we need to decode it. You can use some online beutyfiers like this one: http://jsbeautifier.org/
I've copied the code of the file contextmenu_o.js and got this code:
var mouse_x = 0;
var mouse_y = 0;
var mouse_left = false;
var mouse_right = false;
if (document.addEventListener != undefined) document.addEventListener('mousemove', mouseMove, true);
else if (document.layers) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = mouseMove;
document.oncontextmenu = RightMouseDown;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
function mouseMove(a) {
mouse_x = document.all ? event.clientX + document.body.scrollLeft : document.layers ? a.x + window.pageXOffset : a.clientX + window.pageXOffset;
mouse_y = document.all ? event.clientY + document.body.scrollTop : document.layers ? a.y + window.pageYOffset : a.clientY + window.pageYOffset
}
function RightMouseDown() {
mouse_right = true;
return false
}
function init(a, w) {
var b = document.createElement("DIV");
b.id = "contextmenu";
if (!w) var w = 120;
b.style.width = w + "px";
var c = '<div style="position:relative;left:10px;top:-4px;">';
c += a;
c += ' <font color="#565656" size="-2">Get it...</font>';
c += '</div>';
b.innerHTML = c;
b.style.position = "absolute";
b.style.left = "0px";
b.style.top = "0px";
b.style.visibility = "hidden";
b.style.overflow = "hidden";
b.style.padding = "4px";
b.style.backgroundColor = "#ffffff";
b.style.border = "1px solid #6a6868";
document.body.appendChild(b);
delete b
}
function mouseUp(e) {
if (e.which == 1) document.getElementById("contextmenu").style.visibility = "hidden";
else if (e.which == 3) mouse_right = false
}
function mouseDown(e) {
if (e.which == 3) {
mouse_right = true;
document.getElementById("contextmenu").style.left = mouse_x + "px";
document.getElementById("contextmenu").style.top = mouse_y + "px";
document.getElementById("contextmenu").style.visibility = "visible"
}
}
This isn't the most universal code out there and we need some changes. I'm making my changes visible here, on jsfiddle, but mainly I just overwrite document with my div of choice which I'm giving event listeners.
Button with drop down menu based on li list.
jsfiddle.net
Open on lbutton click.
var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");
$menuButton.button({
icons: {
secondary: "ui-icon-triangle-1-s"
}
})
.click(function (event) {
$(document).one("click", function () {
$menuElement.css("visibility", "hidden");
});
$menuElement.css("visibility", "visible");
event.stopPropagation();
});
$menuElement
.menu({
select: function (event, ui) {
$menuElement.css("visibility", "hidden");
}
})
.css("visibility", "hidden")
.position({
my: "left top",
at: "left bottom",
of: $buttonElement
});

javascript, slide div down on button click?

i am trying to get a div to slide down about 200px down a page using javascript when the user clicks another div which acts as a close button.
can someone please show me how i would do this?
<script>
$('.chat_close').click(function(e){
$('.chat_box').slideDown();
});
</script>
Someone already asked the same question a while ago. Avinash replied:
var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px'; //not so imp,just for my example
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height); // Current height
var init = (new Date()).getTime(); //start time
var height = (toggled = !toggled) ? maxheight: minheight; //if toggled
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init; //animating time
if(instance <= time ) { //0 -> time seconds
var pos = instanceheight + Math.floor(disp * instance / time);
slider.style.height = pos + 'px';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
}
},1);
};
};
You can see it here at this URL:
http://jsbin.com/azewi5
Use animate
Also, use .on
<script type="text/javascript">
$('.chat_close').on('click', function(e){
$('.chat_box').animate({"top": "200px");
});
</script>
HTML:
<div class="chat_close">
</div>

Jquery image load issue when navigation through menu

I am having below issue when trying to brows the site through navigation,
http://nickylurie.com.au/Temp/index.php
as you can see left hand site image some time load some time aren't,
i am you using below code to change the image when going through to different page,
var pic = new Image();
pic.src = "images/homeLargeImg.jpg";
and below is the my backend code.
var RHigh=$('#RightPane').height()
var windHigh=$(window).height()
$(pic).hide().load(function()
{
//debugger;
$(this).fadeIn();
var marginT=(windHigh/100*5)
var imgH = (marginT+windHigh)
$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"' style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()
})
$(window).bind('resize', function()
{
resize()
});
function resize()
{
RHigh=$('#RightPane').height()
windHigh=$(window).height()
if( RHigh < windHigh)
{
$("#triquibackimg").css("height",$(window).height());
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
//----------------Right Pane vAlign--------------
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", $("#LeftPane").width());
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#RightPane").vAlign();
//$("#RightPane").hAlign();
});
}
else
{
$("#triquibackimg").css("height",(RHigh+150));
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
// if ($(window).height()>800){
// $("#RightPane").css("position",'relative');
// }
// else{$("#RightPane").css("margin-top",60)}
}
}
can some one please advice about this?
Thanks
Offtopic: I wanted to comment on this questions, because I don't have the answer (yet), its lame that I must have a repetation of 50 to comment..
Ontopic:
What are you trying to achieve and what is the problem?
When I try to view your website, all the large images on the left are loading (mac, chrome), I checked all pages..
They do load very slow..
Why do you want to insert the image by javascript and not simply by a img tag?

Categories