Swapping the Content of Columns with jQuery on Small Screens - javascript

I have an alternating two-column layout made with Twitter Bootstrap 3.
First row has an image on the left and text on the right. Second row has text on the left and an image on the right. And so on.
What I would like to do is on smaller screens (less than 768px) where it turns into a single-column layout have the rows where the image is on the right swap the content of the two columns so the image is displayed on top.
The rows with the image on the right have the class of even.
Here is the html of an even row:
<div class="row">
<div class="col-sm-6 left evenleft">
text
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 right evenright">
image
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
Here is the jQuery I am trying to use:
function swap() {
$('.even').each(function () {
var left, right;
left = $(this).find('.evenleft').html();
right = $(this).find('.evenright').html();
if ($(window).width() < 768) {
$(this).find('.evenleft').html(right);
$(this).find('.evenright').html(left);
} else {
$(this).find('.evenleft').html(left);
$(this).find('.evenright').html(right);
}
});
}
$(function () {
swap();
});
$(window).resize(function () {
swap();
});
It works perfectly when you start the page already re-sized. But when re-size the browser it doesn't work.
I am kind of lost here.

You could use .col-sm-pull-6 and .col-sm-push-6:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
image
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 col-sm-pull-6">
text
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
http://plnkr.co/edit/0f1Id9VYZlRel66OeKni?p=preview

You could place the image first and float it right. I'd imagine you wouldn't need JS at all fot this.

Related

Left align element with centered and variable width element in top row

I would like to find a way to left align <p> with centered <img> in the top.
As images are centered and my page contains different images with different widths, it seems to be a bit challenging.
Here is my html structure:
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 my-auto">
<div class="d-flex flex-row justify-content-center">
<img class="img-fluid d-flex flex-wrap align-items-center" id="image-id">
</div>
</div>
<div class="col-md-8">
SOME CONTENT
</div>
</div>
<div class="collapse collapse-information">
<div class="row row-collapse m-0">
<!--What I want to be left aligned with img tag-->
</div>
</div>
</div>
</div>
A way to do it would be to get the distance between image's div and border of centered image and to report this measure as a left-margin on the element I want to be aligned.
To solve it, I tried to use margin measurments based on window width but it as not working.
While working to have a clean question, I went through https://developer.mozilla.org/en/docs/Web/API/HTMLElement/offsetLeft.
The interresting part is that, javascript allows a dynamic measurement I can also dynamically attribute to other elements.
// get left offset
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
// assing as margin to the following element
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
Last interesting point, this code should wait until the end of page loading (otherwise offet will be equal to 0), so I called it in a structure like:
window.addEventListener("load", function (event) {
setTimeout(() => {
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
}, 0);
});

Make div top two divs fixed after some scroll and reset back when scrolled to top again?

Hi i am trying to make a div remain fixed after some scroll in parent div?
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="fw ofndr-box">
<div class="ofndr-box-half add-here">
Header 1
</div>
<div class="ofndr-box-half2 add-here">
+New
</div>
<div class="fw ofndr-box-in">
</div>
</div>
</div>
here is my working fiddle i want to fix header and +new button after scroll of blue colored div.
https://jsfiddle.net/pavansn/tvg3d709/1/
As your scroll is on ofndr-box instead of window so in Js you can try
var scroll = $('.ofndr-box').scrollTop();
and change :
$(".add-here").addClass(".fixed"); to $(".add-here").addClass("fixed");

Adding slide in specified section when in mobile device (Using Fullpage JS)

Good day. So, i have this script:
<section class="section">
<div class="row text-center profilmain">
<div class="portofoliogallery col-12 col-sm-6 col-md-4 col-lg-4">
1
</div>
<div class="portofoliogallery col-12 col-sm-6 col-md-4 col-lg-4">
2
</div>
</div>
</section>
so normally it will make two coloumns right ? now i want to make a condition if it in mobile device it will show one coloumn only
if($(window).width() < 600){
$('.portofoliogallery').addClass('slidesection');
var $this = $('.portofoliogallery').first();
$this.parent('.row').addClass('flex-row flex-nowrap');
}
});
then i want to add slide from fullpage js https://alvarotrigo.com/fullPage/#secondPage . i change my script to this
if($(window).width() < 600){
$('.portofoliogallery').addClass('slidesection');
var $this = $('.portofoliogallery').first();
$this.parent('.row').addClass('flex-row flex-nowrap');
alert($('.portofoliogallery').hasClass('slidesection'));
}
});
Now i'm done adding .slidesection to my '.portofoliogallery', but the problem is my slide is not working. I can't slide it and i already change my slideselector to this slideSelector:'.slidesection'. so what did i miss ? sorry bad english
You'll have to destroy and initialise fullPage.js again so it can recognise the new slide.
Check out my answer in this post.

Scrollmagic pin

I have a bootstrap row, that contains a table__tabs and a table__info, and looks like this:
<div class="row">
<div class="table__tabs col-md-2">...</div>
<div class="table__info col-md-9 col-md-offset-1">...</div>
</div>
What I wanted to do is to pin it while I scroll for the duration that equal .table__info height, which is dynamic.
How am I able to 'unpin' the div when the bottom of the screen touches the end of the .table__info?

Detecting whether mouse is in an element with jQuery

I have a web page that uses jQuery. My page looks something like this:
<div id="page">
<!-- Stuff here -->
<div id="content">
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
<div class="row">
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
<div class="col"><!-- stuff --></div>
</div>
</div>
<!-- Stuff here -->
</div>
<div id="note" style="display:none;">
<!-- stuff here -->
</div>
var noteTimeout = null;
var note = $('#note');
$(".row")
.mouseover(function () {
var col = $(this).find('.col:last');
var p = col.position();
note.css({zIndex:1000, top: p.top, left: (p.left + col.width() - note.width()/2) });
note.show();
})
.mouseout(function (e) {
if (noteTimeout != null) {
clearTimeout(noteTimeout);
}
noteTimeout = setTimeout(function () {
note.fadeOut(150);
}, 250);
})
;
Basically, when a user hovers over a row, I'm trying to show a note in the last column of the row. If a user moves to another row, the note moves to that row. However, if the user's mouse is outside of the "content" area, I want to hide the note after 250 milliseconds. The last requirement is causing me problems.
As it is, the note disappears after 250 milliseconds if I change rows. However, if I remove the timeout, the note flickers if a user moves their mouse over it.
You want to use .hover for the element (in this case an array of elements) which detects as the mouse enters and leaves. It's an expansion of the functionality of .mouseenter() & .mouseleave().
This is will make it so that whilst the mouse is over the element it will do something rather than .mouseover which simply triggers an event.
This is explained further by Navin Rauniyar here

Categories