I'm trying to figure out what I've been doing wrong but I don't get it. I'm kinda new to this parallax. I checked the chrome console and can't find any mistakes that way. Could you please help me?
The parallax effect won't work it only shows normal pictures, I can't figure out what the problem is. Probably I've made something easy, or forgot something.
Anyone got any idea? :)
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
ul{
margin:0;
padding:0;
}
ul li{
list-style:none;
overflow:none;
height:600px;
}
.parallax-background{
height:700px;
}
.parallax1{
background-image:url('parallax1.jpg');
}
.parallax2{
background-image:url('parallax2.jpg');
background-position:50% 100%;
}
.parallax3{
background-image:url('parallax3.jpg');
}
.parallax4{
background-image:url('parallax4.jpg');
}
ul li .subcontent{
position:absolute;
top:500px;
left:100px;
color:white;
font-family:Arial, Helvetica, sans-serif;
}
h1{
font-size:70px;
margin-bottom:0px
}
h2{
font-size:30px;
margin-top:0px;
}
</style>
</head>
<body>
<ul class="parallax">
<li>
<div class="parallax-background parallax1"></div>
</li>
<li>
<div class="parallax-background parallax2"></div>
<div class="subcontent">
<h1> Sample Text</h1>
<h2> Hey there </h2>
</div>
</li>
<li>
<div class="parallax-background parallax3"></div>
</li>
<li>
<div class="parallax-background parallax4"></div>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
var $container = $(".parallax");
var $divs = $container.find("div.parallax-background");
var thingBeingScrolled = document.body;
var liHeight = $divs.eq(0).closest("li").height();
var diffheight = $divs.eq(0).height() - liHeight;
var len = $divs.length;
var i,div,li,offset,scroll ,top, transform, diffHeight;
var offsets = $divs.get().map(function(div,d){
return $(div).offset();
});
var render = function(){
top = thingBeingScrolled.scrollTop;
for(i=0;i<len;i++){
div = $divs[i];
offset = top - offsets[i].top;
scroll = ~~(offset/liHeight * diffHeight);
transform = 'translate3d(0px, ' + scroll + 'px, 0px)';
div.style.MozTransform = transform;
div.style.msTransform = transform;
div.style.Otransform = transform;
div.style.transform = transform;
div.style.webkitTransform = transform;
}
};
(function loop(){
requestAnimationFrame(loop);
render();
})();
})(jQuery);
</script>
</body>
</html>
The code is hard to read, maybe post it to CodePen.io.
I've found the easiest way to create a parallax effect is using Skrollr.js.
Here is a Simple parallax scrolling tutorial.
I solved the problem.
var diffheight = $divs.eq(0).height() - liHeight;
Spelled diffHeight with a small "h" and when i used it i called it with a big "H"
scroll = ~~(offset/liHeight * diffHeight);
So i Simply changed the small h to a big and that was it.
Now it works perfectly!
Related
I need to upload different text files each containing some popups.
I am using JQM 1.4.5 and I'm pretty sure I don't make any syntax errors.
My main program has a menu and the user can choose the text.
At this point, I have to upload the text file and the popup file related to that text.
All the attempts I've made using the '.load' function work for text but not for popups.
Can you give me some suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup Tooltip</title>
<link rel = "stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel = "stylesheet" href="style/style.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#t1").click (function(){
$("#corpus").load("text1/text1.html");
$("#pp").load("text1/popup1.html #popupBasic").enhanceWithin();
});
$("#t2").click (function(){
$("#corpus").load("text2/text2.html");
$("#pp").load("text2/popup2.html");
});
});
</script>
<style type="text/css">
a:link {color:red;
font-weight:bold;
text-decoration: none;
font-size:100%;
}
#tableMax{
border: 1px solid white;
margin:0 auto;
border-collapse:collapse;
}
#tableMax tr {border-bottom: 1px solid brown;
}
#tableMax td {padding: 18px 25px 18px 20px;
font-family: "Didot";
font-size: 20px;
background-color: antiquewhite;
color:black;
}
#tableMax td:nth-child(1) {
color:brown;
font-size:100%;
text-align:center;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="menu" style="display:block;">
<button class="ui-btn ui-btn-b ui-btn-inline" id="t1">text 1</button>
<br>
<button class="ui-btn ui-btn-b ui-btn-inline" id="t2">text 2</button>
</div>
<div id="corpus"></div>
<div data-role="popup" id="pp"></div>
</div> <!-- chiude content -->
</div>
</body>
</html>
<!-- text1.html> -->
<table id="tableMax">
<tr><td>1a</td>
<td>This text contains a popup
</td></tr>
<tr><td>1b</td>
<td>This text also contains a popup
</td></tr>
</table>
<!-- popup1.html -->
<p id="popup_1" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1a.</p>
<p id="popup_2" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1b.</p>
Here are some suggestions to achieve what You want:
Basically, IMHO it is better not to create and destroy again and
again a JQM widget. If possible, create just at the beginning all
needed widgets and change the content, i.e. text and images
when You need it.
In my example I will show You both: dynamic destroying and instancing
a JQM table and dynamic changing the content of one existing popup.
Please, note that for a JQM table the thead and th tags are mandatory.
In Your example, You may need to show some data related to a table
row, but in my example I will attach the popup data to a single cell.
I believe, this is a more flexible approach.
The simplest way to create such a relation is to set a custom
data-attribute. You can call it whatever You want. Just for instance,
data-info: popup
After that, the popup content will be retrieved from the clicked
anchor, just before the popup will be open.
For the menu, instead of push-buttons I am using radio-buttons,
so the code will be much simpler, using just one event handler.
Moreover, it will be nice if You tell the user that something is
going on, by using a spinner and a visual feedback after the table
data has been downloaded (table fade-in).
Here is the most relevant code:
$(document)
.ready(function () {
$('input[name=files]').on('change', function (e) {
var path = e.target.id, $table = $("#tableMax").hide().table("destroy");
$.mobile.loading("show");
$.when($.get(path + '/popup.html'), $.get(path + '/text.html')).done(
function (popupData, tableData) {
$.mobile.loading("hide");
/* each data[0] will contain the response text */
$table.html(tableData[0]).table({create: function() {
var allPopups = $('<div></div>').append(popupData[0]);
$(this).fadeIn("slow").data("mobile-table").allHeaders.each(function() {
$(this).data("cells").each(function(){
$(this).find("a[href='#pp']").each(function () {
var popupLink = $(this).attr("data-info"),
popupContent = $(allPopups).find(popupLink);
$(this).data("popup-content", popupContent);
});
});
});
}
});
});
});
})
.on('pagebeforechange', function (e, ui) {
var link = ui.options.link, ctx = link && link.context, hash = ctx && ctx.hash;
if (hash == '#pp') $(hash).empty().html($(ctx).data('popup-content'));
});
Here is a full workng DEMO: https://plnkr.co/edit/3IXDqQJMVn2QYOed?open=lib%2Fscript.js
The following is a shortened version of the real code. I use PhoneGap to implement an algorithm that takes my 2 designs - one for portrait and one for landscape - and switch between them as needed, including automatic scaling to the center of the specific screen. It works great on Android, but there appears to be some unexplained corruption of the tab graphics on iPhone, upon switching between modes (portrait / landscape) and clicking the tabs.
The HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js"></script>
</head>
<body>
<div id="main" class="main">
<div id="ext" class="extPortrait">
<div id="tabDiv1" class="tabDiv1Portrait">
<img id="tabImg1" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt1" class="tabTxt">Tab1</div>
</div>
<div id="tabDiv2" class="tabDiv2Portrait">
<img id="tabImg2" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt2" class="tabTxt">Tab2</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
The CSS:
body {direction:ltr; margin:0; border:0; padding:0;
background-color:#c9c9c9; font-family:Calibri,Arial;
font-size:14px; color:#0070b8; overflow:auto;}
.main {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
background-color:#c9c9c9; overflow:hidden; z-index:10;}
.extPortrait, .extLandscape {display:block; position:absolute;
margin:0; border:2px solid; border-radius:6px; padding:0;
background-color:#f4f4f4; border-color:#bcbcbc; z-index:20;}
.extPortrait {top:3.409%; left:4.444%; width:90%; height:93.344%;}
.extLandscape {top:6.25%; left:2.5%; width:94.375%; height:87.798%;}
.tabDiv1Portrait, .tabDiv2Portrait, .tabDiv1Landscape, .tabDiv2Landscape
{display:block; position:absolute; margin:0; border:0; padding:0;
overflow:hidden; cursor:pointer; z-index:30;}
.tabDiv1Portrait, .tabDiv2Portrait
{top:-1.913%; width:21.605%; height:7.304%; font-size:2.922%;}
.tabDiv1Landscape, .tabDiv2Landscape
{top:-3.729%; width:23.179%; height:14.237%; font-size:5.357%;}
.tabDiv1Portrait {left:8.642%;}
.tabDiv2Portrait {left:31.481%;}
.tabDiv1Landscape {left:4.636%;}
.tabDiv2Landscape {left:28.477%;}
.tabImg {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
cursor:pointer; z-index:40;}
.tabTxt {display:block; position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; border:0; padding:0;
line-height:233%; color:#ffffff; text-align:center;
cursor:pointer; z-index:50;}
The JavaScript:
var PMYWID = 360, PMYHIG = 616; //sizes of my portrait design
var LMYWID = 640, LMYHIG = 336; //sizes of my landscape design
var scrWid = 0, scrHig = 0;
var portrait = true;
var tabNum = 0;
(function() {
window.onload = function() {
mobilePeriodicCheck();
tab1Clk();
document.getElementById("tabDiv1").addEventListener("click", tab1Clk);
document.getElementById("tabDiv2").addEventListener("click", tab2Clk);
//document.getElementById("main").style.display = "block";
}
}());
function mobilePeriodicCheck() {
var scrWidNew = window.innerWidth, scrHigNew = window.innerHeight;
if ((scrWidNew != scrWid) || (scrHigNew != scrHig)) {
scrWid = scrWidNew;
scrHig = scrHigNew;
portrait = (scrWid <= scrHig);
var wid,hig,lef;
if (portrait) {
if (scrWid/scrHig <= PMYWID/PMYHIG) { wid = scrWid; hig = Math.floor(PMYHIG*scrWid/PMYWID); lef = 0;}
else { wid = Math.floor(PMYWID*scrHig/PMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
else {
if (scrWid/scrHig <= LMYWID/LMYHIG) { wid = scrWid; hig = Math.floor(LMYHIG*scrWid/LMYWID); lef = 0;}
else { wid = Math.floor(LMYWID*scrHig/LMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
var id = document.getElementById("main");
id.style.width = wid + "px";
id.style.height = hig + "px";
id.style.left = lef + "px";
id.style.fontSize = hig + "px";
document.getElementById("ext").className = portrait ? "extPortrait" : "extLandscape";
document.getElementById("tabDiv1").className = portrait ? "tabDiv1Portrait" : "tabDiv1Landscape";
document.getElementById("tabDiv2").className = portrait ? "tabDiv2Portrait" : "tabDiv2Landscape";
document.getElementById("tabImg1").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
document.getElementById("tabImg2").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
}
setTimeout(mobilePeriodicCheck, 1000);
}
function tab1Clk() { tabClk(1); }
function tab2Clk() { tabClk(2); }
function tabClk(iTab) {
if (iTab!=tabNum) {
if (tabNum > 0) {
document.getElementById("tabImg"+tabNum).style.WebkitFilter = "brightness(100%)";
document.getElementById("tabImg"+tabNum).style.filter = "brightness(100%)";
}
document.getElementById("tabImg"+iTab).style.WebkitFilter = "brightness(135%)";
document.getElementById("tabImg"+iTab).style.filter = "brightness(135%)";
tabNum = iTab;
}
}
After playing a lot with this, I think I found the problem: At least one of style.WebkitFilter and style.filter causes rendering problems in iOS WebView. I switched to simply changing the src of the image, and that worked perfectly on both platforms.
I would like to get the current slide index onChange and not onClick but I don't know how do do that.
First, I had it with ng-click, like this:
In the .html:
<ul uib-carousel id="myCarousel" active="active" no-wrap="noWrapSlides"
style="background-color: #0a0a0a; height:100%; width:100%; padding: 0">
<li id="mySlides" uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"
style="background-color: #0a0a0a; height: 100%;width: 100%;">
<img ng-src="{{slide.imageUrl}}" ng-click="setSelectedImage(slide.data)" style="background-color: #0a0a0a; height: 100%;width: 100%; max-height: 640px; max-width: 800px"/>
</li>
</ul>
And in the .js:
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currIndex = 0;
var slides = $scope.slides = [];
$scope.addSlide = function(media,data) {
slides.push({
imageUrl: $scope.urlWsImg+media.mediaId+"/stream/800",
id: currIndex++,
data:data
});
};
$scope.addSlide($scope.currentImage.media,$scope.currentImage);//bootstrap
for(var i=0;i<enrichedImages.length;i++) {
var enrichedImage=enrichedImages[i];
$scope.addSlide(enrichedImage.previewImage,enrichedImage);
}
$scope.setSelectedImage =function(imageUrl){
$scope.currentEnrichedImage=imageUrl;
}
I've tried on put an onchange="setSelectedImage(slide.data)" in #my-carousel, but it doesn't work since the slide is unknown when the change occurs.
I hope someone can help me.
You can't use ngChange because the directive doesn't expose any ngModel
From the ngChange docs
Note, this directive requires ngModel to be present.
But you have the active property that you can $watch
$scope.$watch('active', function(newIndex, oldIndex) {
if (Number.isFinite(newIndex) && newIndex!==oldIndex) {
// invoke your function here
}
});
Here is a forked plunk
It seems that active is holding the current index.
You should be able to just use $scope.active.
Im following along with http://multiplethreads.wordpress.com/tag/pagedown/
The example in the link above makes use of twitter bootstrap whereas i make use of zurb foundation.
Basically im trying to get a custom dialog box to insert images from my pagedown editior (sort of like how stackoverflow does it).
Im abale to pull up the modal box (foundation reveal) but it seems to be "behind" something and i cant seem to interact with it. Any ideas?
My code:
js file:
PH.ui.markdown = {
initialize: function () {
var markdownTextArea = $('textarea[data-markdown=true]');
if (markdownTextArea.length == 1) {
markdownTextArea.addClass('wmd-input')
.wrap("<div class='wmd-panel' />")
.before("<div id='wmd-button-bar'></div>")
.after("<div id='wmd-preview' class='wmd-preview'></div>");
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function (callback) {
//setTimeout(function () {
$('#myModal').foundation('reveal', 'open');
// }, 5000);
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
}
}
};
html:
<div id="myModal" class="reveal-modal">
<h2>Upload Image</h2>
<%= f.file_field :image %>
<button class="btn" id="insert_image_post">Insert Image</button>
<!-- <a class="close-reveal-modal">×</a> -->
</div>
I figured it out.
The wmd-prompt-background had a z-index of 1000:
<div class="wmd-prompt-background" style="position: absolute; top: 0px; z-index: 1000; opacity: 0.5; height: 1085px; left: 0px; width: 100%;"></div>
So i just added:
<style type="text/css">
#myModal {
z-index: 1500;
}
</style>
to my page and it worked.
One way to do it is to position the div of your modal directly under the <body>. This way you make sure that the modal is not part of elements with special z-index
I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.
I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
// window.setTimeout(function(){
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
//}, 1);
}
});
});
</script>
</head>
<body>
<form>
<ul id="wrapper">
<li id='one'>
<div style="width: 100px; height: 100px; border: 1px solid green">
one<br /></div>
</li>
<li id='two'>
<div style="width: 110px; height: 110px; border: 1px solid red">
two<br /></div>
</li>
</ul>
<br />
</form>
</body>
</html>