I want to auto-open the first tab when the modal shows (The first tab with "names=tabs"). Right now, I have to manually click the tab to show content.
Here is the HTML tabs and modals markup
<div class="col s12 m6 l3">
<div class="card">
<a class="modal-trigger" href="#abc">
<div class="card-image">
</div>
</a>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4"></span>
</div>
</div>
</div>
<div id="abc" class="modal">
<div class="row"><h4></h4></div>
<div class="row">
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab29" />
<label for="tab29"></label>
<div id="tab-content29" class="tab-content">
<p></p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab30" />
<label for="tab30"></label>
<div id="tab-content30" class="tab-content">
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab31" />
<label for="tab31"></label>
<div id="tab-content31" class="tab-content">
<p></p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab32" />
<label for="tab32">Contact</label>
<div id="tab-content32" class="tab-content">
</div>
</li>
</ul>
</div><!-- Container
And here is the JS that triggers a modal
$(document).ready(function(){
$('.modal-trigger').leanModal(
{
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .4, // Opacity of modal background
in_duration: 150, // Transition in duration
out_duration: 150, // Transition out duration
}
);
});
Since LeanMdal does not have a callback method you can probably achieve this by creating a separate click event like this
$('.modal-trigger').on("click", function(){
$('ul.tabs li:first').click();
})
Easiest would be to add whatever classes control tab visibility straight into the HTML. leanModal doesn't seem to support any sort of callbacks or events.
Related
Ok I have different sections for my homepage.
This is the code of the menu bar:
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">Home</li>
<li>Services</li>
<li>About Digm</li>
<li>Contact Us</li>
<li><b>FREE Audit</b></li>
</ul>
</div>
These work fine as far as going to the sections I need them to is concerned.
But I also have buttons wrapped in DIV elements for a slideshow. The buttons work if I make them external links to leave my site, but they won't let me use them to go to the same sections I can go to with the menu bar links.
These are the DIVs with the buttons:
<div id="ubea-hero" class="js-fullheight" data-section="home">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>It's time to shift strategies.</h2>
<p>FREE Audit</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Experience The Butterfly<br />Effect</h2>
<p>Read More</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Ready? Book A Consultation</h2>
<p>Why Wait?</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
The code I have for 1 the sections looks like this:
<div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="ubea-container">
<div class="row text-center">
<div class="display-t">
<div class="display-tc">
<div class="col-md-12">
<h3>If you have inquiries please email us at <b>info#blahblahblah.com</b></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Anyone see why the buttons won't scroll to the sections?
Anchor elements href property does that by default. Simply give the target element the id attribute matching the href="#introduction" on the menu anchor.
<div>
<ul>
<li>Intro</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="intro">Intro</h4>
<p>Foo bar.</p>
What does your CSS look like?
You could always use JavaScript:
// we can't use "forEach" on a NodeList, since it's an Array prototype
var forEach = [].forEach;
// listen for an "onclick" event on the target button
document.getElementById("button_id").addEventListener("click", function() {
// select the target slide
var slide = document.getElementById("slide_1");
// show the target slide
slide.style.display = "block";
// hide the slides siblings
forEach.call(slide.parentNode.children, function(s) {
// NOTE: don't hide the target slide!
if(s !== slide) {
s.style.display = none;
}
});
});
Or if you prefer, you could just use jQuery:
$("#button_id").on("click", function() {
$(this).show().siblings().hide();
});
Also, avoid using so many div's, try to use semantic tags instead.
Too many div's will make your code hard to maintain and the overuse of the div tag can lead to a div soup, which can be horrible to maintain.
Good luck.
I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});
It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).
I am learning framework7 and I wonder if it is possible to create an input type="text" outside UL tag. On the code below, the css is not rendering on my textfield. Please see code comments.
And here is the fiddle.
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<!-- THE CSS WON'T WORK ANYMORE, IDK WHAT IS THE CORRECT CSS CLASS EITHER TO WRAP THE ELEMENT -->
<div class="content-block">
<input type="text" />
</div>
If you put the input outside the list, you will lose the separating lines, but it is possible adding the required classes:
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<div class="content-block list-block">
<div class="item-input">
<input type="text" value="text here" />
</div>
</div>
Here: https://jsfiddle.net/k5gd7Lww/10/
I am trying to put my form on a slider in such a way that slider seems to be running in the background of form. If I am using position absolute, then I have to apply a lot of margin and top pixels because there is a navbar above the slider and position absolute applies with respect to the parent element(navbar).
How can I exactly target the position absolute w.r.t my form, not navbar (parent element)?
Or
If you guys think that there can be a better option to deal with this then do share ideas!
Thanks in advance!
Here is the demo link
HTML code:
<section id="main-slider" class="carousel">
<!--start-->
<div id="ninja-slider">
<div class="slider-inner">
<ul>
<li class="dummySlide">
<a class="ns-img" href="img/002.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/003.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/004.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/005.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/zess.jpg"></a>
</li>
</ul>
<div class="navsWrapper">
<div id="ninja-slider-prev"></div>
<div id="ninja-slider-next"></div>
</div>
</div>
</div>
<!--end-->
</section><!--/#main-slider-->
<form role="form">
<!--First Row-->
<div class="row">
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Title</label>
<select class="form-control" name="title">
<option value="0">Select</option>
<option value="one">Mr.</option>
<option value="two">Miss</option>
<option value="three">Mrs.</option>
<option value="four">Dr.</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Sur-Name</label>
<input type="text" class="form-control" name="surname" />
</div>
</div>
</form>
I do have a working example which uses TWBS's carousel. I created a wrapper .container which has a slider and a form as children. The slider is fullwidth while the form has a width of 70% so it will always be responsive, the height is static for now, you could change this using media-queries. Here is my example:
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
</div>
<div class="myform">
<h1> My Form </h1>
<form>
...
</form>
</div>
</div>
Bootply: http://www.bootply.com/tNAmbhKWb7
You don't have wrapper with class="formSection" for the form and also you should delete a bottom: 0 from formSection class.
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">
Where you declare the <div class="row">
put this code
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"
This will definitely work
I need a small help from all of you .
I have a list in which multiple div is present. Each list has 3 divs inside it where the first div of every list is an image. I need to fade in fade out the first div of each list.
Below is my code.
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<div class="sliderinner">
<ul>
<li>
<div id ="image1">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li >
<div id ="image2">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id ="image3">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image4">
<div class="description">
<div class="description-text">
<h2>Birds</h2>
</div>
</div>
</div>
</li>
<li >
<div id="image5">
<div class="description">
<div class="description-text">
<h2>Taj Mahal</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!--slider-->
<edit>
animation + delay increased for each boxes : http://codepen.io/gc-nomade/pen/qAjod/
</edit>
here is an example :
div {
animation: fdio 1s infinite;
background:gray;
}
#keyframes fdio {
50% {opacity:0;}
}
for : <div> text </div>
DEMO
do not forget to add vendor-prefix or use a script to add them automaticly
<ul>
<li>
<div id="image1" class="abc">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image2" class="abc">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image3" class="abc">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
</ul>
setInterval(function(){ $(".abc").fadeToggle("slow");},4000);
http://jsfiddle.net/x73z9/2/
you can use like this :
li div:first-child {
//put css code here
}