Here is my HTML, first:
<div id="master-template" class="row" style="height: 600px;">
<!-- Left Side -->
<div class="col-lg-6" style="height: 100%;">
<div class="row" style="height: 50%;" >
<div class="region col-lg-12" data-div="1">
</div>
</div>
<div class="row" style="height: 50%;">
<div class="region col-lg-12" data-div="2">
</div>
</div>
</div>
<!-- Right Side -->
<div class="region col-lg-6" style="height: 100%;" data-div="3">
</div>
</div>
And my jQuery:
$("#master-template").find('.region').click(function() {
alert("click");
});
So, I only get the alert when I click on the "Right Side". Because it is a direct descendant. The others do not register; almost as if the .row is blocking it. Is there a way I can (with either one or two) click functions in jQuery register clicks for all div's with .region? children, grandchildren, etc?
This is happening because Right Side is the only .region DIV that has any dimension. (By virtue of height:100%).
The other two .regions are not being clicked because they have no dimension (height is 0)
Related
I am working on a website in which I want to place next and previous buttons on images so that its easy for the users to navigate through the images.
The php code which I have used with carousel classes are:
<div class="text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->media))
{
foreach ($data['item']->media as $media)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$media->url.'">
</div>
</div>';
//'.$media->url.';
}
}
?>
</div>
</div>
The HTML code rendered at the front end is:
<div id="owl_item_images" class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer owl-height" style="height: 350px;">
<div class="owl-stage" style="transform: translate3d(-7677px, 0px, 0px); transition: 1.5s; width: 8530px;">
<div class="owl-item">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item active" style="width: 853px;">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
-
-
-
-
<div class="owl-dot active"><span></span></div>
</div>
</div>
Problem Statement:
I am wondering what changes I should do in the PHP code (as html code is rendered at the front end) above so that previous/next buttons are visible.
UPDATE:
On removing display none I can see next and previous buttons but I am wondering still how I can hide next and previous buttons from a single image.
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
/* display: none; */
}
For owl carousel navigation is disabled by default. We have to enable it while initializing the carousel.
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
nav : true;
});
});
You can refer this link for additional options
The owl-carousel will automatically disable the owl-prev and owl-next if there is only one item in the list.
So first verify that you have more than one item in the list. Try examples with increasing numbers of items and see when/if owl-prev and owl-next appear. There is logic in the library to disable the control under certain circumstances.
Otherwise look to link below that suggests ways to change the owl library class to avoid the problem under certain circumstances.
https://github.com/OwlCarousel2/OwlCarousel2/issues/1809
Not sure if i fully understand your question but maybe remove "disabled" from here:
<div class="owl-nav disabled">
I'm trying to select a single sibling further up in the DOM after clicking a button. I only want to find the closest sibling upwards (in production there's a lot more HTML between the buttons, so it's more necessary to split it up this way). I'm using a prevAll(selector:first) to do this, and when I use a very simple version (here), it seems to work ok. But when I do it in a way that's more similar to my actual environment, prevAll() can't seem to find the sibling element div.googleMapsContainer:
Here is my HTML:
<div style="display: none;" class="googleMapsContainer" id="gm1">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
<div style="display: none;" class="googleMapsContainer" id="gm2">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<br>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
And here is my JavaScript:
$(document).on('click', '.gmapInit', function() {
console.log("here is this: ");
console.log($(this));
var closeThing = $(this).prevAll("div.googleMapsContainer:first");
console.log("here is the closest: ");
console.log(closeThing);
closeThing.attr("style", "");
});
The console shows that the closeThing is nothing, as the prevAll was not successful. Here's a JsFiddle for demonstration: https://jsfiddle.net/NateH06/twk9mtjg/
This one is working for me, I just modified your Fiddle.
I selected the parent div that was in the same scope and then used your prevAll() call to precise my selection. What happens when you try this in your actual Project?
Have a look:
$(document).on('click', '.gmapInit', function() {
var closeThing = $(this).parents("div.tableProcessingToolBarContainer").prevAll("div.googleMapsContainer:first");
closeThing.attr("style", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;" class="googleMapsContainer" id="gm1">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
<div style="display: none;" class="googleMapsContainer" id="gm2">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<br>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I am using bootstrap 3.3.5, jquery 1.11.3 and the affix script to try to keep my navigation bar at the top of my screen at all times. It has been working well except when I try to add columns with the col-xs-* and col-md-* classes.
For example it scrolls fine with multiple containers in rows like this:
<div id="container" class="container-fluid">
<div id="about" class="container-fluid">
<!--some information here, it scrolls fine-->
</div>
<div id="resume" class="container-fluid">
<div class="container-fluid">
<!--seemingly the problem has to do with using the xs and md tags-->
<div class="row" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<div id="projects_sidescroller" class="container-fluid">
<!--this one scrolls fine as well-->
</div>
I have set up a jsfiddle link with the problem present. When you scroll down to the coloured table, it's text will display on top the navbar instead of hiding below it. https://jsfiddle.net/mhjyw37d/
Add z-index to your affix class.
Like:
.affix {
top: 0;
width: 100%;
z-index: 999;
}
I have a link to my div mySkills, and when I access my page I have the bars loaded, but I just want to load my progress bars when i click in my href to this div mySkills.
How can we do that?
<nav id="menu">
<ul>
<li >About</li>
<li>Skills</li>
<li >Contact</li>
</ul>
</nav>
<div class="mySkills">
<h1>John <span>Skills</span></h1>
<div class="skill">
<h6>HTML</h6>
<div class="progress_bar orange">
<div style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<h6>CSS</h6>
<div class="progress_bar teal">
<div style="width: 67%;"></div>
</div>
</div>
<div class="skill">
<h6>Photoshop</h6>
<div class="progress_bar blue">
<div style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<h6>PHP</h6>
<div class="progress_bar green">
<div style="width: 55%;"></div>
</div>
</div>
<div class="skill">
<h6>Javascript</h6>
<div class="progress_bar yellow">
<div style="width: 55%;"></div>
</div>
</div>
</div>
Here is a possible approach to your request:
http://jsfiddle.net/pHyz9/
HTML added:
<button id="update">Update Values</button>
CSS:
.skill {
display: none;
}
.progress_bar div {
transition: width 1s;
}
Javascript (jQuery):
$("#update").on("click", function(){
$(".skill").fadeIn(800);
$(".orange div").css("width", "75%");
$(".teal div").css("width", "67%");
$(".blue div").css("width", "80%");
$(".green div").css("width", "55%");
$(".yellow div").css("width", "55%");
});
It uses CSS3, it is a bit incomplete, and the code could be prettier, but this is only an example to show what can be done with such a simple code.
So you should take following steps in order to achieve your goal.
Steps:
1. Make your <div class="mySkills"> hidden using css.
div.mySkills
{
display:none;
}
2. And on Skills
$('a[href="#mySkills"]').click(function(e){
e.preventDefault;
e.stopPropagation;
$('div.mySkills').toggle();
});
More about .toggle() you can read from here.
P.S.: If I understand correctly your question and answer in properly replay with comments. I will correct it.
If you want to see working example open following link.