Vertical Alignment - Foundation 5 - Simple Javascript - javascript

I've used the technique explained here (js.fiddle link) to achieve vertical alignment for a section on my page.
The problem I have is that I would like to re-use this same technique on a different part of my page.
At the moment this works, but obviously the height of the first instance is then applied to a completely unrelated section somewhere else, and the vertical alignment is not achieved. Could someone help me with modifying the js (maybe using 'this'?) to allow the use of the same code to apply the height to different elements in different parts of my page?
Or do I have to duplicate this code with different var/class names each time I want to use it?
Code snippets below
HTML
<div class="row row_v_align">
<div class="small-3 columns column_v_align">
<div class="v_align"><img src="spade.png"></div>
</div>
<div class="small-9 columns">
<h3>Title</h3><p>Content</p>
</div>
</div>
<div class="row row_v_align">
<div class="small-3 columns column_v_align">
<div class="v_align"><img src="bullsEye.png"></div>
</div>
<div class="small-9 columns">
<h3>Title</h3><p>Content.</p>
</div>
</div>
CSS
.row_v_align {
display: table;
}
.v_align {
display: table-cell;
vertical-align: middle;
}
JS
$(window).on("resize", function () {
var rowHeight = $(".row_v_align").height();
console.log(rowHeight);
$(".column_v_align").height(rowHeight);
$(".v_align").height(rowHeight);
}).resize();

I tested code below with fiddle you linked.
$(document).ready(function(){
$(".row").each(function(){
var rowHeight = $(this).height();
console.log(rowHeight);
$(".column", this).height(rowHeight);
$(".v_align", this).height(rowHeight);
});
});
So for you this should work:
$(window).on("resize", function () {
$(".row_v_align").each(function(){
var rowHeight = $(this).height();
console.log(rowHeight);
$(".column_v_align", this).height(rowHeight);
$(".v_align", this).height(rowHeight);
});
}).resize();
each() run function for every matched element
$("...", this) makes sure that changes are made inside current row

Related

Bootstrap row causes FullPageJS to have wrong width and height

I have the following snippet directly inside the body tag:
<div id="container">
<div class="section profile">
<div class="row">
<div class="col-sm-6">
A
</div>
<div class="col-sm-6">
B
</div>
</div>
</div>
<div class="section technical">
</div>
</div>
My CSS file if it is neccessary:
body {
background-color: #808080;
}
.section {
}
.section.profile {
background-color: #2980b9;
}
.section.technical {
background-color: #bdc3c7
}
However, when I use FullPageJS, the result is like this:
(note: their are thin lines at the left and right)
The problem only happens if I use row div. It also happen if I wrap the row by another div. Also, the problem disappear if I resize the browser window.
This is how I call the script, just like the documentation:
<script>
$(document).ready(function () {
$("#container").fullpage();
});
</script>
I'm not pretty sure what are you expecting to happen, but check this:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
The container must be a class, not an id, but this also will add some padding to the sides.
Also, you should move the .row class to the upper level id and delete the current one with the .row class in it, the row <div> can have both classes without any problem.

Making a certain id disapear once I scroll within a specific section?

Trying to make a specific id (#logo) disapear once I scroll in specific section id ("#performance-graphs"), the id that is hidden must show itself again once I have scrolled out that section.
Please see my code below, currently id does not work but the idea is there, not sure what I am doing wrong. basically I trying to make my main header smaller by removing the logo when it gets to the chart section.
JQUERY CODE
<script type="text/javascript">
$(document).ready(function() {
$('#performance-charts').scroll(function() {
var scroll = $('#performance-charts').scrollTop();
if (scroll > 10) {
$('#logo').css("display", "hidden").fadeOut(250);
}
else {
$('#logo').css("display", "block").fadeIn(250);
}
});
});
</script>
HTML SNIPPET BODY
<section id="performance-graphs">
<a id="performance-graphs"></a>
<div class="double-space"></div>
<div class="centered-wrapper">
<h1 class="section-title">charting performance</h1>
...............................................................
</div>
</section>
HTML SNIPPET HEADER
<span itemscope itemtype="http://schema.org/LocalBusiness"><header id="fixed" class="solid-header">
<div class="centered-wrapper">
<div itemscope itemtype="http://schema.org/Service"><div itemprop="ServiceType" content="Asset and Fund Management"></div></div>
<div id="logo"><img src="../images/value_images/VPM_global3a.png" alt="White Fleet Globel Select Opportunities">
<p>LU0721514452:USD - Managed by Value Portfolio Managers (Pty) Ltd</p></div>
<br>
<a class="nav-btn"><i class="fa fa-bars"></i><span>Menu</span></a>BaB
Your help would be greatly appreciated.
Ok here you go. I used your fiddle and updatet it HERE
Basically you have bad code there, because an id should be unique! (i just added another charakter to one of the duplicated IDs.
I just updated your JS Code like this:
if ($(document).scrollTop() > $('section#performance-graphss').offset().top) {
Because you need the offset().top of your graph container and compare it to the scroll position of the qhole document.
EDIT:
Does this FIDDLE help?
I just added another check for hiding the element:
$('section#performance-graphss').offset().top + $('section#performance-graphss').height() > $(document).scrollTop()
So when you scroll past the container the logo gets display: blick; again.
Watch out for the CSS i added: The containers need a height.
#performance-graphss {
width: 100%;
height: 700px;
display: block;
}

One page website change menu color each section

I'm currently building a one page website with a fixed navigation menu (with a blue background). This one page website has 4 sections, 2 with a blue background and 2 with a white background.
My idea to do with this menu is when i scroll (not mouse hover) over a blue section, the menu background turns white. and when i scroll over a white section, the background changes back to blue.
An example can be found here.
(Not my site, but look at the changing color of the menu while scrolling)
My HTML code looks like this:
<div class="subMenu" >
<div class="inner">
Home
Over mij
Kennis
Projecten
Contact
</div>
</div>
<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Section 2</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Section 3</h1>
</div>
</div>
<div class="section s4">
<div class="inner">
<h1>Section 4</h1>
</div>
</div>
Is there a simple way to do this?
Thanks in advance.
I've found/created a temporary fix for my problem.
$(window).scroll(function(e) {
var s1 = $('.s1'),
s2 = $('.s2'),
s3 = $('.s3'),
s4 = $('.s4'),
menu = $('.menu'),
diff = s1[0].offsetTop - window.pageYOffset;
diff2 = s2[0].offsetTop - window.pageYOffset;
diff3 = s3[0].offsetTop - window.pageYOffset;
diff4 = s4[0].offsetTop - window.pageYOffset;
if(diff < 100) {
$(".menu").addClass("white");
$(".menu").removeClass("blue");
}
if(diff2 < 100) {
$(".menu").addClass("blue");
$(".menu").removeClass("white");
}
if(diff3 < 100) {
$(".menu").addClass("white");
$(".menu").removeClass("blue");
}
if(diff4 < 100) {
$(".menu").addClass("blue");
$(".menu").removeClass("white");
}
if(diff > 100) {
$(".menu").removeClass("white");
$(".menu").removeClass("blue");
}
});
JSFIDDLE DEMO
Not sure exactly what you want to do but, unless you want to change the background of another element (other than the one you're mousing over) an easy way is to use the :hover css selector.
like this:
.inner:hover{
background-color: blue;
}
this will make changes to the class when you're hovering over.
If however, you want to make changes to a different element, then you need to attach an event handler through javscript:
(rough code, not tested)
var menuitem = document.getElementById('menu_to_turn_other_stuff_blue'); // can use getElementsByTagName here, but you'll have to walk the HTMLCollection returned
var otheritem = document.getElementById('other_stuff_to_turn_blue');
menuitem.onmouseover = function(){ otheritem.style.backgroundColor = "blue"; } // ideally, you want to use addEventListener, not directly modifying the attribute this way, but either will work - addEventListener is however the recommended way
you can use onmouseout or the proper event handler through addEventListener to change the color back if necessary. The CSS solution will work automatically for this.
Take a look at the source of the example website you gave: view-source:http://www.franzsans.de/
section id="info" class="bg-white b-blue f-grey"
Just as quick example with jQuery a Fiddle
$(".s1,.s2").hover(function ()
{
$(".subMenu").removeClass("white").addClass("blue");
});
$(".s3,.s4").hover(function ()
{
$(".subMenu").removeClass("blue").addClass("white");
});
$(".s1,.s2,.s3,.s4").mouseleave(function ()
{
$(".subMenu").removeClass("blue").removeClass("white");
});
Example CSS:
body {
background-color:yellow;
}
.subMenu a {
color:black;
}
.s3, .s4, .white {
background-color:white;
}
.s1, .s2, .blue {
background-color:blue;
}
For reference: http://api.jquery.com/addclass/, http://api.jquery.com/removeClass/, http://api.jquery.com/hover/, http://api.jquery.com/mouseleave/
Update for updated question: Previously question was to change background-color of menu in case scrolling over section which was misunderstood as hover. As question was clarified, approach would be e.g. to add jquery inview and to change the background-color when the white or blue section is in view following the instructions provided on given link (as I don't want to just copy them from there and final steps could be done by OP).
Just as example for using inview new Fiddle with inview. No need to style it, just expand the result window above the 1st section and scroll down; you'll notice that color will change according to the section which is in view. Added following for that: the mentioned inview.js and
$('.s1,.s2').bind('inview', changeBlue);
$('.s3,.s4').bind('inview', changeWhite);
where the changeBlue() and changeWhite() functions are just the hover-events from above.

How to Slide or Move this Set of Divs

I have a set of seven div's with the following properties:
height: 100px;
width: 100px;
display: inline-block;
I have a wrapper div containing these seven blocks with only enough room to fit four and change.
The overflow is hidden.
How can I make this function so that when you clicked and dragged horizontally, or swiped with your finger on mobile, the entire row of div blocks would slide to show the previously hidden ones?
Please refer to this jsFiddle for the example.
We can use css or jQuery here.
*Bonus, show fractions of otherwise entirely hidden div's at the edges of the container.
Based on jfriend00's answer I modified this so it will work on touch/click and move with the mouse.
var last_x = null;
var holding = false;
//Mark the wrapper as clicked/touched
$('.wrapper').mousedown(function(){
holding=true;
});
//We do this on document so that even if movement goes outside of the container the event will fire
$(document).mouseup(function(){
holding=false;
});
$('.wrapper').mousemove(function(e){
if(last_x === null || !holding) //If this is the first movement
{
last_x = e.pageX;
return;
}
var ammount = e.pageX - last_x;
$('.slider',this).css('margin-left', '+=' + ammount);
last_x = e.pageX;
});
The gist of how this works is that when the mousedown event is detected on the container the script starts tracking all mouse movement and moves the content with the mouse. When the mouse is released it stop tracking movement.
Fiddle: http://jsfiddle.net/NvJam/2/
Since no one has mentioned jQuery.Kinetic I'll add this:
<div class="carousel">
<div class="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
<div class="fourth">Fourth</div>
<div class="fifth">Fifth</div>
<div class="sixth">Sixth</div>
<div class="seventh">Seventh</div>
</div>
</div>
$('.carousel').kinetic();
Demo: http://jsfiddle.net/louisbros/2pRBg/6/
see here
.wrapper {
width: 900px;
height: 100px;
overflow: hidden;
}
You can put an additional container div and use absolute positioning on that div to move the items left/right. Here's a demo:
http://jsfiddle.net/jfriend00/7edc9/
HTML looks like this:
<div class="wrapper">
<div class="slider">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
<div class="fourth">Fourth</div>
<div class="fifth">Fifth</div>
<div class="sixth">Sixth</div>
<div class="seventh">Seventh</div>
</div>
</div>
You weren't entirely clear how you wanted to move them on non-touch screens, but here's some event handlers that work on buttons:
$("#left").click(function() {
$(".slider").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
$(".slider").stop(true, true).animate({left: "+=125px"}, 500);
});
Something similar could be hooked up for touch events.
Even better solution: use the JQuery UI draggable:
$('.slider').draggable({
axis: 'x',
});
http://jsfiddle.net/DCuGV/2/

Finding the next hidden div and showing it with a jQuery selector

I'm building a slideshow in jQuery that allows the user to see four images, and page through them, forwards and backwards by appending a new div with the image to the bottom via .load, and then hiding the top div. I'm very new to programming.
I'm having trouble working out a selector to allows the user to go "back" showing the next hidden div, after the first shown div, and hiding the last showing div - faux code example below.
<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>
<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>
Jquery to load a new image and attach to the bottom, and hide the first div currently displaying.
$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.
// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it
});
Jquery to allows the user to go back to an image that they have previously seen and hide the last shown div at the bottom
$('.scrollUp').click(function() {
// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.
$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?
});
I dont quite understand correctly, however this info may help...you need to match the first visible div then use .prevAll() and filter to get the hidden sibling
$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();
I've spent hours today on this site trying to do something very similar to what was posted in this question.
What I have is Previous | Next links navigation doing through a series of divs, hiding and showing.
Though what I ended up with was different than the answer here....this was the one that most got me where I needed to be.
So, thanks.
And in case anyone is interested, here's what I did:
<script language="javascript">
$(function() {
$("#firstPanel").show();
});
$(function(){
$(".nextButton").click(function () {
$(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
});
});
$(function(){
$(".backButton").click(function () {
$(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
});
});
</script>
<style type="text/css">
.defaultHidden { display: none; }
.navigation { display: block; width: 700px; text-align: center; }
#contentWrapper { margin-top: 20px !important; width: 700px; }
.nextButton { cursor: pointer; }
.backButton { cursor: pointer; }
</style>
<div class="navigation">
<span class="backButton"><< Previous</span> | <span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
<div id="firstPanel" class="panel defaultHidden">
<img src="images/quiz/Slide1.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel" style="display: none;">
<img src="images/quiz/Slide4.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<img src="images/quiz/Slide6.jpg" width="640" />
</div>
Repeat ad naseum...
</div>
a shot in the dark but...
selecting the first shown div and sliding it up
$('.slideShow:visible:first').slideUp();
selecting the first hidden div after the first shown div and sliding it down...
$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()
psuedo selectors FTW!
Something like the following should do the trick
$(function() {
$(".scrollUp").click(function() {
//Check if any previous click animations are still running
if ($("div.slideShow:animated").length > 0) return;
//Get the first visible div
var firstVisibleDiv = $("div.slideShow:visible:first");
//Get the first hidden element before the first available div
var hiddenDiv = firstVisibleDiv.prev("div.slideShow");
if (hiddenDiv.length === 0) return; //Hit the top so early escape
$("div.slideShow:visible:last").slideUp();
hiddenDiv.slideDown();
});
$(".scrollDown").click(function() {
if ($("div.slideShow:animated").length > 0) return;
var lastVisibleDiv = $("div.slideShow:visible:last");
if (lastVisibleDiv.next("div.slideShow").length === 0) {
//No next element load in content (or AJAX it in)
$("<div>").addClass("slideShow")
.css("display", "none")
.text("Dummy")
.insertAfter(lastVisibleDiv);
}
$("div.slideShow:visible:first").slideUp();
lastVisibleDiv.next().slideDown();
});
});
Only thing that this solution does is check if an element that was previously invisible is now being animated. This solves some of the problems regarding multiple clicks of the links that occur before the animations have completed. If using AJAX you'd have to do something similar (e.g. turn a global variable on / off - or just disable the scroll down link) to avoid multiple requests being made to the server at once...

Categories