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.
Related
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");
Hi i would like to change the value of a div width, based on the outside div width
I am new in jquery and javascript and tried this code:
if ($('col-md-4 col-sm-6').width() <= 320 ){
$('.card-info').width(120px)
};
but it didn't work...
the html is:
<div class="col-md-4 col-sm-6">
<div class="card-info">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card-info">
</div>
</div>
(...)
Could some one help me to find out how to do that, change div "card-info" to 120px width if the div "col-md-4 col-sm6" is 320px or less.
thanks a lot.
You're not selecting the col-md-4 and col-sm-6 class in jQuery. You missed the dot(.) before $('col-md-4 col-sm-6') col-md-4 here and then a comma(,) and the another dot before col-sm-6.
The solution would be
if ($('.col-md-4, .col-sm-6').width() <= 320 ) {
$('.card-info').width(120);
}
or
if ($('.col-md-4, .col-sm-6').width() <= 320 ) {
$('.card-info').css('width', '120px');
}
I have an application with adverbs, which is displayed to user.
There could be a hundreds of advertizing panels, and I would like to load them to user partially when it scrolls down. Almost like it works on the Facebook's wall.
Application is written in Angular and styled by Bootstrap.
The advertizing panel wrapped in divs:
<div class="row">
<div ng-repeat="ad in ads">
<div class="col-sm-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-body fixed-panel">
<img src="{{ ad.Logo}}"
<h4 class="editContent text-center text-primary">{{ ad.Name }}</h4>
</div>
</div>
</div>
</div>
</div>
How can I achieve it?
You can handle it using jQuery
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
// get ads and append(push) them to $scope.ads
}
});
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.
I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/
undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});
class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.