I'm trying to get my background image to move with my mouse as it moves upon the #titleheader class objects. The page renders fine but the functionality doesn't activate. I'm working in Django. I've added the first (top of the page) #titleheader object from the base template which extends into a home template which contains the other #titleheader object. I've compiled both templates into what chrome would see when rendering the page below. I suspect suspect something is wrong in the line: $(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px'); but I'm unable to figure out what to change in my code.
My index page is as follows:
<!doctype html>
<html>
<head>
<style> #landing-content {
background-size: 110%;
height: 110%;
width: 110%;
overflow: hidden;
background-repeat: no-repeat;
} </style>
<title>Home Page</title>
<link rel="stylesheet" href="/static/courses/css/layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".titleheader").mousemove(function(event){
$(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px');
});
});
</script>
</head>
<body id="landing-content" background="/static/courses/images/back7.jpg">
<section class="site-container slider">
<article class="glass down">
<div class="titleheader" style="width:100%;height:80px;position:absolute;top:0;bottom:100%;left:0;right:0;background-color:rgba(229,240,247,0.7);border-width:1px;z-index:0;border-bottom-style:solid;border-color:#f0fafb;">
<a href="/" class="titleheaderimg">
<img src="/static/courses/images/tz_blue2.png" alt="G" class="titleheaderimg" style="z-index:100;opacity:1;align-self:center;position:relative;top:9%;left:1%;">
</a>
</div>
</article>
<div style="height:100px;">
<p>
</p>
</div>
<div class="centrediv" style="width:720px;position:absolute;top:26%;bottom:45%;left:0%;right:0;margin:auto;background-color:rgba(229,240,247,0.7);border-radius:20px;border-color:#f0fafb;border-width:1px;">
<h2 style="text-align:center;vertical-align:middle;opacity:1">Hi,<span><br><br></span>We are a <span>XYZ based team</span> that works with educators to improve their efficiency using state-of-the-art language processing technology.<span></span>
<br><span>Know more.</span></h2>
</div>
<div class="centrediv" style="position:absolute;top:86%;bottom:0;left:47%;right:0;margin:auto;">
<h3>Contact us.</h3>
</div>
</section>
</body>
</html>
UPDATE:
The code is updated now and there is no error in console, pycharm, chrome dev tools, or anywhere. Still the background doesn't move! Can someone help me with this issue please? Thanks!
According to the MDN on mouseevent.pageX,
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
You said you're using Chrome, and Chrome is listed as the only browser supporting the pageX and pageY accessors, but it might be worthwhile to consider another way. MouseEvent.clientX is supported on all modern browsers - could you get that to work?
Also, I've had trouble with the $(this) selector - I prefer to use a fully qualified element selector when the method will only be dealing with one element anyways. Might be worth trying.
Good luck!
Related
I am working in a huge application where most things are hard coded badly using javascript/jquery (especially the heights & widths of lot of components).Most has its element.style property rendering some width and height from somewhere.
element.style {
width: 1566px;
height: 425px;
}
Is there a way of inspecting that to find that "this width and height" is from "this script file" and "this line"? just like the css source map which points out the partials from which individual styles are applied? Any browser plugins of any sort that can do the tricks as far as script debugging is concerned ?
Any info would be of great help!
[EDIT]
I have tried the options posted below.! Posting a sample replica as well.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="reset.css" />
<style type="text/css">
.bg{
background-color:blue;
}
body,html{
height:100%;
}
body{
min-height:100%;
}
</style>
</head>
<body class="bg">
</body>
and in app.js
$(document).ready(function(){
$(".bg").width(1566);
$(window).resize(function(){
$(".bg").width(1800);
})
})
Screenies here :)
Setting breakpoint
Pointing to jquery.min.js instead of app.js line number
This may not directly answer your question but I feel it may help you.
In chrome there's a handy "break on attribute change" setting that you can toggle on any element.
Open web inspector, right click any element, choose "Break on" > "Attribute Change".
Hope it helps!
EDIT:
To elaborate further, right click any element in Chrome and choose "Inspect Element".
When the developer tools open, the element you right clicked will be highlighted.
Right click this highlighted element and choose "Break On" > "Attribute Change".
If any JS modifies any attributes on this element, your code will break and reveal the line that updated the attribute in the dev tools for you.
See below image for reference:
I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle
so this seems to be a common question, however none of the answers have provided me with any joy. I've fully read the Skrollr Documentation and can conclude I'm totally at a loss here.
My basic html markup:
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<div id="navbar">
<!-- This is a fixed position div -->
</div>
<div id="skrollr-body">
<!-- Rest of my site -->
</div>
<script src="skrollr.min.js"></script>
<script>
skrollr.init({
forceHeight: false
});
</script>
</body>
</html>
So you can see as the documentation states my fixed element is outside my other content.
I'm using Version 0.6.26 (2014-06-08) - downloaded from the GitHub page.
Mobile testing on iPad 2, iOS7 and Google Nexus 4, Android 4.4.4
Thanks in advance for any suggestions/help
I simply hadn't styled/set a height on the division skrollr-body. I fixed simply by adding:
#skrollr-body {
float: left;
width: 100%;
height: 100%;
}
According to this (about half way down under the section mobile support), to make it work on mobile devices you need a #skrollr-body on your page, which I did not see in your source.
Also, this github issue seems to address this problem.
I have a JavaScript code that I got from the site: http://www.micahcarrick.com/change-image-with-jquery.html I only modified the name of the images as to use .png files I have. The issue is if I open this in a web browser locally, then when I click on one of thumbnails called django.gif I am directed to the actual image rather then the new image replacing the other. However, if I put this .html script on a Godaddy.com website and go to it with the same web browser it does work correctly just like the original site: http://www.micahcarrick.com/code/jquery-image-swap/index.html . I notice that at the site I got this code from the author mentions that "The thumbnails are links to full size versions of the images. If a user does not have JavaScript, the links still go to the large image." Does this mean I don't have Java Script? I can run other simple JavaScript codes locally. Why does this work when I put it on a site, but does not work when testing locally, even when using the exact same web browser? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Change Image with jQuery</title>
<style type="text/css">
body { width: 600px; margin: auto; }
#imageWrap {
width: 640px;
height: 420px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<h1>Example: Change Image with jQuery</h1>
<p>
Main image is replaced using jQuery when a thumbnail is clicked. See full
description at <a
href="http://www.micahcarrick.com/change-image-with-jquery.html">Change
Image with jQuery</a>
</p>
<a href="bidu.png" class="thumbnail"><img src="django.gif"
alt="Image 1"/></a>
<a href="athex.png" class="thumbnail"><img src="django.gif"
alt="Thumbnail 2"/></a>
<div id="imageWrap">
<img src="bidu.png" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>
Thank you,
Tom
This line right here is what's causing your issues:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
The "//" before the URL tells the browser to use the same protocol as the page is, and when running locally, the protocol is going to be "file:" which the browser will use to look into your local drive to find the jquery library (which it won't find, thus breaking the page). To fix this, prepend "http:" or "https:" to the URL so it looks like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I see two problems.
1. Your script tag src attribute for jQuery will not locate the correct resource. Running locally, this syntax (//ajax...) will resolve as file:///ajax.googleapis.com/..., which is not where jQuery is. Try putting a http:// or https:// in front of it.
2. You're using a deprecated jQuery function. .live() is not in version 1.6.2 - you need to use .on() instead, like so:
$(".thumbnail").on("click",function() { ... });
That should work.
Hope this helps.
change the src of the script tag to include the http: protocol
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
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.