I am wondering if there is a compatibility problem between JQM and Flot.
I've looking for documentation about this, but there is not a lot...
Here is the issue: depending on the order in which I load the libraries, things work while others don't:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is not displayed: "Uncaught Invalid dimensions for plot, width = 671, height = 0"
Now if I remove JQM:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is displayed and the resize works, so I guess this problem comes from JQM but I have no idea what...
I've tried to load things in different orders, but nothing helps.
Does anybody know a workaround for this ?
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<style type="text/css">
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot test</h1>
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"/>
<script type="text/javascript">
$(function () {
var c1_values = [[0, 0],[1, 1],[2, 4],[3, 9],[4, 16],[5, 25],[6, 36],[7, 49],[8, 64],[9, 81],[10, 100],[11, 121],[12, 144],[13, 169],[14, 196],[15, 225],[16, 256],[17, 289],[18, 324],[19, 361]];
var c1_data = [{ data: c1_values, label: "curve1"}];
$.plot($("#placeholder"), [
{
data: c1_values,
lines: { show: true, fill: false }
}
]);
});
</script>
</body>
</html>
I am currently trying this "no conflict" function, but no result for now.
jQuery Mobile automatically wraps all your content in a page if you don't include on yourself. Generally, that means you ought to do it yourself in your code! So, first step is to move your placeholder into a jQM template:
<div data-role="page">
<div data-role="header">
<h1>Flot test</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"
/></div>
<!-- /content -->
</div>
<!-- /page -->
Now, it seems to be a common problem that the content div does not stretch to fill the whole available vertical space. I found two solutions, neither of which seem very ideal.
Use CSS to try and make the content div full height (note that data-role"content" becomes a CSS class of ui-content):
.ui-content {
height:100%;
width:100%;
position:absolute;
}
Use Javascript to fix the content height dynamically as you go along (do this before your flot call). Taken from here:
var fixgeometry = function () {
/* Some orientation changes leave the scroll position at something
that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".ui-header:visible");
var footer = $(".ui-footer:visible");
var content = $(".ui-content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(window).bind("orientationchange resize pageshow", fixgeometry);
Neither of those solutions seemed to work particularly well for me, although they both did "work" as far as showing the graph.
I've posted an example of the 2nd version here: http://alpha.jsfiddle.net/ryleyb/mz24P/
The CSS is there as well, commented out if you want to try that instead.
Related
I'm trying to get a fixed background to work with Fullpage JS. No matter what I do the backgrounds stay there or they don't show up at all. I tried a JS Fiddle but I can't get that to work at all either. https://jsfiddle.net/jpking72/jqa7wapt/9/
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.4/jquery.fullPage.js"></script>
<style type="text/css">
#fullsite {
background-attachment:fixed;
}
#section1 {
background:url(/images/pwHoustonDowntown.jpg) no-repeat 0 0 fixed / cover;
}
#section2 {
background-color:#CCCCCC;
}
#section3 {
background:url(/images/pwHoustonWindow2.jpg) no-repeat 0 0 fixed / cover ;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#fullsite").fullpage({
})
})
</script>
</head>
<body>
<div id="fullsite">
<div class="section" id="section1">
<h1>
Section 1
</h1>
</div>
<div class="section" id="section2">
<h1>
Section 2
</h1>
</div>
<div class="section" id="section3">
<h1>
Section 3
</h1>
</div>
</div>
</body>
</html>
That's a bug in some browsers. Nothing to do with fullpage.js. Fullpage.js uses the translate3d property of css3 which is the one causing the bug in some browsers.
To solve it you have two options:
Use css3:false in fullpage.js options. It won't go as fluid, but you'll have your fixed background working.
Use scrollBar:true. You'll get a scrollbar and it might not go as fluid as well.
As you can see in the fixedBackgrounds.html provided in in fullpgae.js, it uses css3:false.
$('#fullpage').fullpage({
verticalCentered: false,
//to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
css3:false
});
You need to include jquery into your project. Jquery should be included first
$(document).ready(function () {
$("#fullsite").fullpage({
});
});
Ok the deal is I have a page with a top banner 100% wide and 500px tall and below that a content area, say, 4000px tall. inside that content area there is a box (100 by 100) that I want to have act the way in a certain way. When I scroll down the page to the point were that box touches the top of the screen I want it to be fixed at the top until I scroll up and it becomes unfixed at the top of the parent container (so where it was to start). Anyone have any examples or simple fixes????
Edit:
I found this fix that I think will work but I don't know what I am doing wrong:
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
(code is in the head of the html document)
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
I know this code is meant to add a class to the #contentSideIner div, .sticky {position: fixed; top: 0; }. am I making a kind of brain dead mistake here?
this is the jfiddel that is basicly what i have http://jsfiddle.net/07xe5tLf/
more code i have in use:
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li>Home</li>
<li>Monthly Spotlight
<ul>
<li>Destiny</li>
<li>Diablo III</li>
<li>Shadow Of Mordor</li>
<li>The Last Of Us
<li>Bayonetta 2</li>
</ul>
</li>
<li>Older Reviews</li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
This is what it seems you want
What you want is a sticky menu which requires javascript to find the current position of the page in the viewport and change the CSS or class to make it fixed. This is a bad example because there is no div that is made visible after you scroll and make the element fixed to prevent the page content below to fill in where the menubar was. This can be done simply by using jQuery to make this hidden div visible. If you need code then just ask.
It is called a sticky menu and I always forget what it is called. :)
How I remember is usually spending some time on Google searching specifically for what I want until I find it. Don't make StackOverflow your default goto for help because that is how you can get banned. You need to be specific and provide code on something like JSFiddle or spend some time making a visual example or find a site that does what you want. Many sites like Facebook use this technique and it is quite common. If this doesn't make sense then you should go to W3Schools and read up on some Javascript and CSS and find some tutorials on jQuery.
For your fiddle, you need to go and include jQuery in your head: http://jsfiddle.net/b2550/07xe5tLf/1/
I JSFiddle it is as simple as making that your framework in the sidebar and in your code you need to include this in your head (as I said above in the comments)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
I am creating a website that has this kind of structure:
Where the red box represents the user's browser window. When the user clicks a button on the home (bottom), it slides up to the new scene (stratosphere for example). Each scene is an entire image. Now the problem is, I need to account for users using different screen sizes and when they resize the window. I've looked up ways to resize backgrounds images using CSS or JavaScript, and that doesn't work well for me. I need to find some way to make them all fit for everyone using different screen sizes. An idea I have - I know this sounds clunky but would it be viable to write a PHP script which resizes an image to the dimension given by the JS? JS finds the browser window's size, hands it to PHP, PHP returns the image JS needs. And have this happen when a user resizes the browser window too...
How can I do this?
Update:
I tried SVG, and it's working beautifully. But now I am wondering how I can get the other elements to be in accordance with the SVG?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<!-- Date: 2012-08-01 -->
<style type="text/css" media="screen">
body { margin: 0px; }
.area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
var slide = 'a3'
$(".area").height($(window).height());
$(window).resize(function() {
$(".area").height($(window).height());
$(".area").width($(window).width());
scroll_to(slide, 1, 0);
});
scroll_to('a2', 'slow', 0);
});
</script>
</head>
<body>
<div class="area" id="a3">
<h1>scene 3</h1>
</div>
<div class="area" id="a2">
<h1>scene 2</h1>
<div style="height: 100px; border: 1px solid black;" id="text">
hi
</div>
</div>
<div class="area" id="a1">
<h1>scene 1</h1>
</div>
</body>
</html>
Why don't you use an SVG as background image? Your scene seems fairly simple.
All browser but IE ≤ 8 understand background: url(some.svg): http://caniuse.com/svg-css
Use one large background-image. Set it up with something like this:
html, body {
margin: 0;
padding: 0;
width: 100%
}
body {
position: absolute;
bottom: 0;
height: 2000px;
background-image: url('background.png')
}
Then use JavaScript to set the bottom property of body to move up, like this:
window.addEventListener('keydown', keypressed, false);
function keypressed(e) {
if(String.fromCharCode(e.charCode) == ' ') {
document.body.style.bottom += parseInt(document.body.style.bottom) + 10 + 'px';
}
}
I'm afraid re-sizing the background image is going to be your best bet. Why don't you post the code you've already tried for such a solution and others can help you along from that angle.
You should definitely split the image into multiple images, one for each tab.
This is how I would do it: http://jsfiddle.net/4CwdX/3/
You don't need to resize the image. The browser can automatically stretch it for you with background-size: 100%.