Bootstrap carousel no reacting when responsive - javascript

I have a carousel set up with a small box inside it to display some text that the user can fill out. This box can be toggled on and off where it slides up and down as required.
However, in mobile devices, this box no longer appears. I've checked the element and I can see that it is firing, but nothing is appearing in my browser. Could someone take a fresh look over my code to see if I forgetting something?
I won't post the whole carousel code, just the affect area.
Carousel affect area:
<div class="container-fluid slider np">
<div class="row clearfix">
<div class="col-md-12 column">
<div id="carousel-733617" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
#foreach (var slide in Model.Content.GetPropertyValue<ArchetypeModel>("carousel"))
{
var imageMedia = Umbraco.Media(slide.GetValue("slideImage")).GetCropUrl("CarouselSlide");
var slideHeading = slide.GetValue("heading");
var slideText = slide.GetValue("text");
string relatedLinksRaw = slide.GetValue("relatedLink");
dynamic relatedLinks = null;
if (!string.IsNullOrEmpty(relatedLinksRaw))
{
relatedLinks = Json.Decode(relatedLinksRaw);
}
if (slideCount == 0)
{
slideClass = "item active";
}
else
{
slideClass = "item";
}
<div class="#slideClass" #*role="option" aria-selected="true" tabindex="0"*#>
<img alt="" src="#imageMedia" />
<div class="carousel-caption" style="z-index:20;">
<div class="buttonslide">
<a href="#" class="btn btn-xs btn-default pull-right openclose">
<i class="glyphicon glyphicon-chevron-down"></i> Close</a>
</div>
<div class="slidecontent">
<h2>#slideHeading</h2>
<p>
#slideText
<br />
#if (relatedLinks != null)
{
foreach (var relatedLink in relatedLinks)
{
if (relatedLink.newWindow == true)
{
#relatedLink.caption
}
else
{
#relatedLink.caption
}
}
}
</p>
</div>
</div>
</div>
slideCount++;
}
My Javascript that controls the box opening and closing:
$('.openclose').click(function(e) {
if ($('.slidecontent').is(":visible")){
$('.openclose').html('<i class="glyphicon glyphicon-chevron-up"></i> Show More');
}
else{
$('.openclose').html('<i class="glyphicon glyphicon-chevron-down"></i> Close');
}
$('.slidecontent').toggle('slow');
e.preventDefault();
});
Above is a quick MS Paint of the issue.
When I shrink down my browser, the carousel (the black box) resizes as per the responsive design. When it reaches a certain width, the green box automatically toggles off and disappears a bar with a button for Open / Close.
When the carousel is full size, the green box works just fine. It is when the black box is shrunk that the green box no longer appears. When I inspect the element, I can see my code is firing off something, however, the green box is not visible on my screen.

You can add media queries in javascript too.
You just need to change the 500px to whatever you want and add the code into the if you want to use.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
}
else {
// window width is less than 500px
}
}
}
Hope this helps, you can read more about it here.

I believe that the code in your CSS #media property is playing a role here. Check and confirm.
You can manually define how each screen may look. For example:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
This will change the screen color if screen size is less than 300.

Related

Hide specific HTML element if screen is smaller than 767px (jQuery)

On one of my websites I want to remove a specific HTML element if the screen is smaller than 767px (on mobile devices).
The following piece of HTML is used 9 times on the page:
<div class="price-list__item-desc"> </div>
So all 9 pieces of HTML have to be removed only on mobile devices.
I already included the following jQuery file on the website:
jQuery(function ($) {
if (window.matchMedia('(max-width: 767px)').matches) {
$('<div class="price-list__item-desc"> </div>').hide();
}
else {
$('<div class="price-list__item-desc"> </div>').show();
}
});
However, the code is not working and the pieces of HTML still show up on mobile devices. I know there might be a very easy fix for this particular objective. But after searching the internet for two days I have come across so many different options that actually made me more confused.
Would very much appreciate any help, thanks in advance!
In the first method, when the page width changes, the div.price-list__item-desc element is hidden or shown using jQuery by controlling the page width.
In the method you developed, the anonymous function is not run to hide the item when the page changes; you need to use event handler method. In the structure I developed, the onresize event is affected when the page width changes. This way I can catch this event when the page width changes.
$( document ).ready(function() {
window.onresize = function() {
console.log(`Width: ${$( window ).width()}`);
var divs = document.querySelectorAll("div.price-list__item-desc");
if (window.matchMedia('(max-width: 767px)').matches)
{
$('div.price-list__item-desc').removeClass("active");
for (var i = 0; i < divs.length; i++)
{
if(divs[i].innerHTML === ' ')
divs[i].style.display = "none";
else
divs[i].style.display = "block";
}
}
else
{
$('div.price-list__item-desc').addClass("active");
}
}
window.onresize();
});
div.price-list__item-desc {
background-color: red;
display: none;
}
.active{
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc">1</div>
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc">2</div>
<div class="price-list__item-desc"> </div>
there's nothing calling your function. Use media queries instead.
UPDATE: I added some js to solve your problem. If you are trying to hide (so the div still takes up space but doesn't show anything) then your question doesn't really make sense. If you want to remove the div then set display to none. The js is used to grab the divs that you want
let divs = document.getElementsByClassName('price-list__item-desc')
for(let i = 0; i < divs.length; i++){
if (divs[i].innerHTML == " ")divs[i].classList.add('hide')
}
#media (max-width: 767px) {
.hide{
display:none;}
}
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc"> </div>
<div class="price-list__item-desc">6</div>
<div class="price-list__item-desc">7</div>
<div class="price-list__item-desc">8</div>
<div class="price-list__item-desc">9</div>

Script causing div to blink when scroll

I am learning JavaScript. I created a navigation bar with two divs:
And added a function so that when the user scrolls down, the first div will fadeOut:
$(document).ready(function() {
var $nav = $('.first-nav'); //Caching element
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 275) {
$nav.fadeOut("fast");
} else {
$nav.fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top pages">
<div class="container-fluid first-nav">
<button id="nav-toggle" data-target=".sidebar-right" data-toggle="sidebar" class="navbar-toggle toggle-right" type="button">
<span></span>
</button>
Login
<button id="get_quote_navbar" name="get_quote_navbar" class="btn btn-login">Get Quote</button>
<i class="fa fa-phone"></i> (877) 400-0232
<!-- Logo -->
<!-- /Logo -->
Home
For Home
For Business
</div>
<div id="navigation" class="col-md-12 sub-nav">
<div class="col-md-6 sub-nav-left">
Commercial
Construction
Multy-family
Partnership
</div>
<div class="col-md-3 sub-nav-right">
<button id="get_quote" name="get_quote_navbar" class="btn btn-quote">Get Quote</button>
</div>
</div>
</nav>
All works fine. In CSS, I created #media for min and max width. And when I do that, for desktop and tablet is all good, but when I want to put fixed first div for mobile, JavaScript makes a problem and I have blinked div when scroll up-down.
How I can add in JS function if (width < 1024) then $nav.fadeIn();?
Try:
if ($(window).width() < 1024) {
$nav.fadeIn();
}
If you want to work with media queries in javaScript, just use the window.matchMedia() as following:
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
Full reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
To get the effect on resizing the window, you need to do like:
function foo(){
//code here
}
foo();
$(window).on('resize orientationchange',foo);
Thanks guys, I succeeded. This is a code.
$(document).ready(function(){
var $nav = $('.first-nav');//Caching element
// hide .navbar first - you can also do this in css .nav{display:none;}
// fade in .navbar
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 275 && $(window).width() > 1024) {
$nav.fadeOut("fast");
} else {
$nav.fadeIn();
}
});
});
});
you can do like this for test the with of the window,
note: you have to refresh the page when you change the size of the window
var widthScreen = window.matchMedia('(max-width: 1023px)').matches;
if(widthScreen){
$nav.fadeIn();
}

How to use jQuery .hover() in combination with Overflow

Well, i am stucked and can't find the answer myself. Hopefully someone can give me a hint.
I try to fullfill the following requirements:
There should be a Newsblock within a HTML Page with a fixed width and
height.
In this Newsblock only the title of the news are visible.
Those news are "collapsed" by default and should "expand" if the Mouse is over it.
Due the fact that the 'Newsblock' is limited by its height, there should be a Scrollbar visible. But only if the currently expanded news makes it necessary, so the user can Scroll down.
Newstitle and Newstext should never leave the Newsblock.
so far so good, i was able to fullfill all those demands except the one with the Scrollbar. If i try to reach the Scrollbar out of the currently expanded news it collapses again and the Scrollbar disappears. I understand that my .hover is configured that it always SlideUp if i leave the newsentry and the Scrollbar isn't a part of the newsentry div. But i have no idea what to change to still have an overall Scrollbar for the Newsblock, but won't disappear if i try to 'reach' it.
P.s.: A Scrollbar only per Newsentry looks weird. Thats why i want 'bind' the scrollbar to the parent container :S
HTML
<div id="newsblock">
<div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
<div class="newsentry">
<div class="newstitle">...</div>
<div class="newstext">...</div>
</div>
... another 9 'newsentry' divs.
</div>
</div>
JS
$(".newsentry").hover(
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
CSS
.newsblock {
height: 200px;
overflow-y: auto;
}
Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock.
The scrollbar being part of #newsblock, the entry isn't closed anymore when you go on it.
EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.
Here is a working example:
var $newsblock = $("#newsblock");
function closeAllNews(slideUpArgs){
return $(".newstext").stop(true).slideUp(slideUpArgs);
}
function openNews(news, slideDownArgs){
$(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}
function ensureNewsTopVisible(news){
// Check if the top of the newsentry is visible...
var top = $(news).position().top;
if(top < 0){
// ...and if not, scroll newsblock accordingly.
$newsblock.scrollTop($newsblock.scrollTop() + top);
}
}
$(".newsentry").each(function(){
var $this = $(this);
// When the mouse enter a news entry...
$this.on("mouseenter", function(){
// ...close all opened entries (normally there is at most one)...
closeAllNews({
// (while making sure that the top of this entry remains visible
// at each step)
step: ensureNewsTopVisible.bind(null, $this)
});
// ...open this newsentry.
openNews($this);
});
});
// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);
.newstitle {
font-size: 2em;
}
.newstext {
display: none;
}
#newsblock {
max-height: 150px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newsblock">
<div>
<div class="newsentry">
<div class="newstitle">News 1</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 2</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 3</div>
<div class="newstext"></div>
</div>
<!-- Etc. -->
</div>
</div>
<!-- Ignore the script below. It is just filling in the news' text. -->
<script>
$(".newstext").each(function(i, newstext){
$.get("http://baconipsum.com/api/?type=meat-and-filler&format=html&paras=5&num=" + i)
.then(function(ipsumHtml){
$(newstext).html(ipsumHtml);
});
});
</script>
Try this:
$(".newsentry, .newsblock").hover( // <-- changed
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
This makes sure the block stays open when you hover either over the header or the block itself.
Is that what you mean?
There would be a joke , if i am wrong .. what i thing just change your css as
/* not .newsblock **/
#newsblock {
height: 200px;
overflow-y: scroll;/* not auto*/
}
It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.
$(".newsentry").click(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
}
);
Or use the below one to go with hover.
$(".newsentry").hover(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
},
function(){}
);
This will not close the news text block until you accidentally hover over another news entry.

looking to set equal heights to columns in Bootstrap - no Table

I want to set equal heights to my columns in Bootstrap 3. I CAN'T set the rows to 'display: table;' or anything like that cause it screws up the layout of everything.
<article>
<div id="post-<?php the_ID(); ?>"> <!-- just gets the post's id -->
<div class="row">
<div class="col-md-8 indx-img" style="background-image:url('...');">
</div>
<div class="col-md-4 text-cell">
<h1>title</h1>
<h3>category</h3>
</div>
</div><!-- /#row -->
</div><!-- /#post -->
</article>
The content is on the right, a column with a background image is on the left. That column needs a height so that the background image is shown, I want that height applied to the column with the text.
I want it to be responsive height, what I used so far for that is
CSS
indx-img {
padding: 16% 0;
}
problem is that height doesn't apply the the column with the text. The ultimate goal is to have the two columns the same height, with the text vertically centred in the 'text-cell' column
If you can't use any css solutions because they will break your layout, you can use javascript.
Here we define a function named resize which will loop through the posts.
If the page is larger than the break point, set the height of the post container to the height of the image.
Then set the height of the text container to 100% once.
If the page is smaller than the break point, check to see if the height is set.
If it is we remove the height setting to allow natural expansion and contraction.
We call the resize function once on page load, then assign it to the window resize handler
(Demo)
<script type="text/javascript">
window.onload = function() {
(function () {
"use strict";
var resize = function () {
var posts = document.querySelectorAll('[id^="post"] .row'), post;
for (var i = 0; post = posts[i]; i++) {
if (window.innerWidth > 768) {
post.style.height = post.firstElementChild.offsetHeight + 'px';
if(post.lastElementChild.style.height !== '100%') {
post.lastElementChild.style.height = '100%';
}
} else {
if(post.style.height !== '')
post.style.height = '';
}
}
};
window.onresize = resize;
resize();
})();
}
</script>
I use the matchHeight plugin for this kind of issue all the time and it works perfectly with Bootstrap.
Just install the plugin, add a class of matchHeight to your col-md-8 and col-md-4 columns:
<div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>
<div class="matchHeight col-md-4 text-cell">
<h1>title</h1>
<h3>category</h3>
</div>
And add the following to your javascript:
$('.matchHeight').matchHeight();
You can then use this fix throughout your site by simply repeating the above steps, even several times on the same page (it automatically scopes to within the current "row" element so if you have 3 rows with 6 elements then only those elements in any given row are matched in size).

CSS- jQuery - scroll one div to left while expanding another div at same time to width 100%

I have html page/ screen split into 4 main parts/ divs. Header, footer, main body and left vertical navigation panel. the navigation panel width is 20% and main body div is 80% width of screen. I have button in navigation panel to hide and display. so when user click this, it hide navigation panel and make main-body width to 100% of screen and vise versa. I have achieved this functionality using jQuery but its not smooth, what I mean by this, on click navigation panel slides to left but same time it make main_body disappears until navigation panel complete scroll to left.
I want this functionally to run smooth i.e. main body div increases its width same time navigation panel is scrolling to left.
http://jsfiddle.net/toxic_kz/73c8o8tq/
jQuery
$(document).ready(function () {
$(".NavigationpanelIcon_Wrapper").click(function () {
$('#NavigationBlock').hide('slide', { direction: 'left' }, 1000);
$('.Main_body_Right_Wrapper').css('width', '100%');
});
});
HTML ASP.net-MVC - Razor
<div id="body_main_wrapper">
<div id="NavigationBlock" class="Navigation_Left_Pannel_Wrapper">
<div id="Navigation_panel_sideBar">
<div class="NavigationpanelIcon_Wrapper">
<span class="_blank_glyphicon">
<i class="glyphicon glyphicon-chevron-right"></i>
</span>
</div>
<div class="NavigationpanelText_Wrapper">
<span class="navigationpaneltext">
Available Functions
</span>
</div>
</div>
<div id="Navigation_list_wrapper">
#{Html.RenderAction("DisplayFunctionsList", "Dashboard");}
</div>
</div> <!--end Navigation_Left_Pannel_Wrapper-->
<div class="Main_body_Right_Wrapper">
#RenderBody()
</div> <!--end Main_body_Right_pannel_Wrapper-->
</div> <!--end body_main_wrapper-->
I tried to replicate this quickly Fiddle here
You could wrap both elements and float the sidebar to the left while giving it a fixed position size then give the main body a margin-left that equals to the sidebar navigation width.. then on click when you hide the sidebar and just reset the main body's margin ?
Let me know if it's not working for you..
Animating the width of .Main_body_Right_Wrapper should do the trick:
$(document).ready(function () {
$(".NavigationpanelIcon_Wrapper").click(function () {
var duration = 1000;
$('#NavigationBlock').hide('slide', { direction: 'left' }, duration);
$('.Main_body_Right_Wrapper').animate({
width: '100%'
}, duration);
});
});
Edit: I forked #AwRak's fiddle to illustrate it.

Categories

Resources