I read many topics but I can't solve this. In js fiddle it works..in my browser it does not.
fiddle
and this is a screen of my browser..the green header won't stick to the top but some lines below..
this is the code in my page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/styles.css" title="Style" media="all" />
<title> title </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="sticky-header.js"></script>
</head>
<body>
<script>
$(function () {
$("table").stickyTableHeaders();
});
</script>
<table.... //from here is identical to the fiddle html
thanks
The following line of code seems to be a piece of optimization that is causing problems. The line below it tells the header where to position itself, but this part is telling the function to exit early because it thinks it's not necessary for some reason. Taking it out means that the code may run a bit slower, but will always work. It seems to run fine without it but if the page is noticeably lagging when scrolling in a real-world scenario then it might be better to try optimizing it instead of just taking it out completely.
if (!base.isSticky || winScrollTop < 0 || winScrollTop + base.$window.height() <= base.$originalHeader.parent().get(0).scrollHeight || winScrollLeft < 0 || winScrollLeft + base.$window.width() > base.$document.width()) {
return;
}
For some reason this works fine in jsfiddle where there are different frames, but does not work when everything is in the main window. Easy solution: remove it.
For the header just make it position: fixed. That will make it stick to the top! :)
EDIT
This does not require Javascript (JQuery). This can be simply done with CSS. Make a ID for the header container, and then make it position:fixed. Simple! Then it will stick to the top of the page.
EDIT 2
Please refer to this fiddle:http://jsfiddle.net/yu765bwh/
IMPORTANT I have meant position:fixed not relative!
Related
To elaborate more on my question, I designed a website specifically to be viewed on a desktop. It does not look good if being tested on a mobile device. Therefore, I made a complete different layout for my website (containing all of the same content) by using jQuery mobile (due to its simplicity).
I realize now that there were probably better ways in doing this, such as implementing the mobile view in my CSS file, based on media queries, but this is the way that I chose to do it and would prefer to stick with it.
So here's my problem:
I want to use my JavaScript file to detect the different screen sizes, in order to display the desktop view or mobile view, based on their specified screen width and height. As of now, my desktop view and mobile view are in two different html files, and I know that is not good.
I don't want two html files, I want to combine the two! That's the only way I would be able to call the two different codes in my .js file, correct? Does anyone know how to do this?
In my mobile view file, I needed to include the jQuery libraries. Without those, it will not work. But when I tried including that in my desktop view file (since I am now trying to combine the files), I tested it alone with just that and it completely messed up the view on my desktop. How do I solve this?? Other than that, I'm assuming I would just separate the codes with two different 's as far as combining the rest of the code, yeah?
For example,
<div id="desktop"> ..... </div> <!-- this is for desktop view -->
and
<div id="mobile"> ..... </div> <!-- this is for mobile view -->
Please, any help would be so appreciated. I've tried researching this, but I can't find anything specific enough to answer my questions.
Here is the beginning of my desktop view file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hwk5.css">
<script type="text/javascript" src="hwk5.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
And here is the beginning of my mobile view file:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
img.fullscreen {
max-height:50%;
max-width:50%;
}
</style>
</head>
<body>
As I said in my comment, you could just detect mobile browsing with PHP and redirect the user to the desktop or mobile site accordingly, but if you really want to do this with jQuery, it is possible.
You would want to check the page width onReady and onResize:
$(document).ready(function(){resize();});
$(window).resize(function(){resize();});
function resize()
{
var mobileMaxWidth = 640; //Define this to whatever size you want
if($(window).width() > mobileMaxWidth)
{
$("div#desktop").show();
$("div#mobile").hide();
}
else
{
$("div#desktop").hide();
$("div#mobile").show();
}
}
JSFiddle
As far as jQuery messing up your desktop site, you must be using another DOM. Are you importing MooTools or another popular DOM that uses $? If so, you would need to explicitly mark jQuery code as jQuery("selector")... instead of $ or use jQuery.noConflict.
For more information, see this post.
I Suggest You To Write Two Seperate CSS Files... One For Desktop And Other For Mobile. And According to the current screen size change the css files using javascript.
To achieve this You Can Use this script
<script type="text/javascript">
$(document).ready(function () {
changecss();
});
$(window).resize(function () { changecss(); });
function changecss() {
var windowwidth = $(window).width();
var windowheight = $(window).height();
if (windowwidth >= 1024 && windowheight >= 768) {
//alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({ href: "Style2.css" });
}
else {
$("link[rel=stylesheet]:not(:first)").attr({ href: "Style1.css" });
}
}
</script>
HTML
<div>
The colour of this text will change.
</div>
This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code
I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.
How to use jquery cookies in showing/hiding elements in a page ? I got the plugin from here
Tried some method but i am not successful. I used slideUp() and slideDown() functions to show/hide elements.
When a element is slided up a cookie should be set. when the page is refreshed, the element should be in slided up position
How to apply cookie when slided up and how to get the cookie when page is refreshed ?
I need help !
I think the following is what you're looking for. Let me know if I am mistaken. Good luck!
http://jsfiddle.net/8VCJY/8/
- EDIT -
Sorry! My cookies were getting set backwards. It does work now (new link). Again, all apologies.
- EDIT -
Actually, I don't even know if it does work. It looked like it did, but then reviewing my code, I can't see how that could be right. All in all, I'm pretty sure that the setting of the cookie at the appropriate time and whatnot will at least get you on the right path. I think my usage of the plugin is wrong, to be honest (I've never used it before), but I gave it what I could. I hope it was at least somewhat useful to you.
Would this do the trick?
<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
<style type="text/css">
#outer {height:500px;width:500px;background-color:black;position:relative;}
#slide-me {height:50px;width:50px;background-color:white;position:absolute;top:250px;left:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<div id="outer">
<div id="slide-me"></div>
</div>
<button type="button" id="myBtn">Slide it!</button>
<script type="text/javascript">
$slideObj = $('#slide-me');
var topOffset = $.cookie('myCookie');
if(topOffset)
$slideObj.offset({top: topOffset - $slideObj.height(), left:$slideObj.offset().left});
$('#myBtn').click(function() {
$slideObj.slideUp();
$.cookie('myCookie', $slideObj.offset().top);
});
</script>
</body>
</html>
P.S I'm using the Cookie plugin.
I'm learning javascript and jquery and have written a very basic script inside my file. I'm experiencing two problems...
The browser never finishes loading the document, it just sits there with the loading icon animating in the tab. Any ideas?
I can't seem to debug this using firebug. When I set a breakpoint anywhere in the document load function, it never hits. Any ideas?
Here's my code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="screen" type="text/css" href="default.css" rel="stylesheet">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var strMarkup = "";
var strXMLFile = "";
//Parse XML and generate accordion elements
var arrayAccordianElements = ParseXML(strXMLFile);
});
function ParseXML(strPath)
{
var arrayEvents = new Array();
arrayEvents[0] = "test1";
arrayEvents[1] = "test2";
arrayEvents[2] = "test3";
//Return the accordian elements
return arrayEvents;
}
</script>
</head>
<body>
hello
</body>
</html>
As you experts can see, my webpage should simply display "hello" after processing some javascript that creates an array inside of a function. Do you see any problems? I apologize if they're obvious problems, I'm a noob :)
Thanks in advance for all your help!
Runs fine for me in Safari 4.0.3. Make sure your path to jQuery is correct? If it is incorrect and there's something misconfigured and jQuery fails to load, that will hang indefinitely.
Code-wise I don't see anything that would cause an infinite loop at all. However, knowing firefox etc, there may be a variety of things out of your control. Start with restarting the browser. Profile the script with Firebug (Console > Profile > Reload the page > Press profile again), and see what part takes most time.
One thing, probably unrelated, close your link tag. is sufficient.