I am expecting that one of my button will work and pop out these forms, but every time I hit the button "More" nothing happens. Please help!
<body>
<!--Hero Image-->
<div class="hero-image">
<div class="hero-text">
<h1 id="demo">Hi! I'm Jake</h1>
<p>Webby web</p>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!--Use any element to open/show the overlay navigation menu-->
<button class="button" onclick="myFunction()">More</button>
</div>
</div>
You're setting the wrong CSS property in your JavaScript. It should be display, not height. See, for example:
document.getElementById("myNav").style.display = "none";
function displayNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
<!--Hero Image-->
<div class="hero-image">
<div class="hero-text">
<h1 id="demo">Hi! I'm Jake</h1>
<p>Webby web</p>
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!--Use any element to open/show the overlay navigation menu-->
<button class="button" onclick="displayNav()">More</button>
</div>
</div>
Related
I'm using themeforest with bootstrap.
When I click in the menu (data-toggle="sidebar"), it refreshes the page preventing me from viewing the menu.
<!-- START MOBILE CONTROLS -->
<div class="container-fluid relative">
<!-- LEFT SIDE -->
<div class="pull-left full-height visible-sm visible-xs">
<!-- START ACTION BAR -->
<div class="header-inner">
<a href="#" class="btn-link toggle-sidebar visible-sm-inline-block visible-xs-inline-block padding-5" data-toggle="sidebar">
<span class="icon-set menu-hambuger"></span>
</a>
</div>
<!-- END ACTION BAR -->
</div>
<div class="pull-center hidden-md hidden-lg">
<div class="header-inner">
<div class="brand inline">
<img src="assets/img/logo.png" alt="logo" data-src="assets/img/logo.png" data-src-retina="assets/img/logo.png" width="78" height="22">
</div>
</div>
</div>
</div>
<!-- END MOBILE CONTROLS -->
In the console, I'm getting the following message:
[Intervention] Unable to preventDefault inside passive event listener
due to target being treated as passive : jquery-3.2.1.min.js:6
And inside jquery, the error is in this part:
preventDefault: function () ... var a = this.originalEvent; ... a.preventDefault(); ...
The error is at: a.preventDefault();
Here's the interesting thing: after several clicks on the menu icon, it shows the menu. That's weird.
Any ideas how to solve this?
I did search the site before posting this question but I'm looking for a really specific answer.
I'm creating a website with a full width slider. The first slide is the 1 min embed Youtube video. I need the video to autoplay when user arrives on site but I need the video to autostop whenever user scroll down the page or when the slide changes.
Slider.html
<!-- start slider -->
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<iframe src='https://www.youtube.com/embed/pTBjHjRhx_Y' frameborder='0' allowfullscreen></iframe>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h1 class="title">Run Over<br>Everything</h1>
<!-- /Text title -->
<div class="button">See Details</div>
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img src="images/slider2.jpg" class="img-responsive" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<h1 class="title">Run Over<br>Everything</h1>
<div class="button">See Details</div>
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"></div>
<!-- Nav Controls -->
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div></div>
<!--/slider -->
</div>
just add ?autoplay=1 to ur iframe src like below and this will do the job
<iframe src='https://www.youtube.com/embed/pTBjHjRhx_Y?autoplay=1' frameborder='0' allowfullscreen></iframe>
I have an app that display 5 div each containing a specific kind of data.
I would like to be able to show one of the div in a modal so that the user can see the data in bigger size.
This would be trigger by a button placed in the top right corner.
HTML
<div class="ui grid">
<div class="sixteen wide column center aligned">
IRM Website
</div>
<div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 2 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 3 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 4 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 5 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
The modal need this javascript to be shown
$('.ui.modal').modal('show');
The idea is that each button triggers a function inside my controller
vm.maximizeData = function(){
$('.ui.modal').modal('show');
}
But how can I display the correct div inside the modal ?
As your question says you want to show a data of particular clicked element into the modal dynamically.
Use a selector to have parent child for click function
Get the content of respective / closest / next DIV content that you want to show in modal as bigger data.
Set the modal content and then show it.
HTML
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Jquery
$(document).ready(function(){
//Button click
$('.mainBox .smallBox .buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('.divContent').html();
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
$('.modal').modal('show');
});
});
FYI, This is just an example, you may need to change variable names as per your need.
$(document).ready(function(){
//Button click
$('.buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('div.divContent').html();
console.log(contentToSet);
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
//$('.modal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content1</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content2</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
How can i hide a image slider using javascript? i want show this banner in first loading and want to hide this banner with a button or "a" tag. if a visitor dont want to see the banner again they can hide the banner.
here my code
<div class="bootslider" id="bootslider">
<!-- Bootslider Loader -->
<div class="bs-loader">
<img src="img/loader.gif" width="31" height="31" alt="Loading.." id="loader" />
</div>
<div class="bs-container">
<!-- Bootslider Slide -->
<div class="bs-slide active" data-animate-in="swing" data-animate-out="magic">
<div class="bs-foreground">
<div class="text-center text-white" data-x="420" data-y="144" data-speed="400" data-animate-in="fadeInDown" data-delay="400">
<h1 class="banner_text1">TEXT<br>
MINING <br>
ENGINE</h1>
<p class="hidden-xs banner_text2">
TEXT SENTIMENTAL ANALYSIS
</p>
</div>
<div class="text-center">
<div class="text-center" style="position:absolute; width:43.75%; margin-left:28.125%;">
<img class="banner_img_imac" style="z-index:0" data-animate-in="fadeInDown" data-delay="800" src="img/template-product-1-imac.png" alt="iMac" class="image-layer" />
</div>
</div>
</div>
<div class="bs-background">
<img src="img/template-product-1.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
</div>
<!-- Bootslider Progress -->
<div class="bs-progress progress">
<div class="progress-bar wet-ashpalt"></div>
</div>
<!-- /Bootslider Progress -->
<!-- Bootslider Thumbnails -->
<div class="bs-thumbnails text-center text-wet-ashpalt">
<ul class=""></ul>
</div>
<!-- /Bootslider Thumbnails -->
<!-- Bootslider Pagination -->
<div class="bs-pagination text-center text-wet-ashpalt">
<ul class="list-inline"></ul>
</div>
<!-- /Bootslider Pagination -->
<!-- Bootslider Controls -->
<div class="text-center">
<div class="bs-controls">
<img src="images/arrow_left.png">
<img src="images/arrow_rit.png">
</div>
</div>
<!-- /Bootslider Controls -->
</div>
please search stackoverflow before
guess you were looking for THIS
of course if you want to hide it permenetly you have to add some to a DB
otherwise it will appear everytime as long the session is refreshed :)
VERY new to js but here it goes.
I want to be able to click on one of the images in the Portfolio section and have it change the text of the h3 in the Text section with a fade transition as well as select the corresponding slide in the slider.
Code:
<!-- 960 Container -->
<div class="container">
<!-- Description -->
<div class="sixteen columns">
<!-- Text -->
<h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>
<div class="flexslider">
<ul class="slides">
<li>
<div id="details">Tier-1 Tech Support</div>
</li>
<li>
<div id="details">Off-site Backups</div>
</li>
<li>
<div id="details">Loaner Computer</div>
</li>
</ul>
</div>
</div><!-- End Description-->
<!-- Portfolio Content -->
<div id="portfolio-wrapper">
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Tier-1 Tech Support</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Off-site Backups</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Loaner Computer</h4>
</div>
</div>
</div><!-- End Portfolio Content -->
</div><!-- End 960 Container -->
all you need is plane javascript or for lesser code, jquery.
just place your img and your div in the markup and bind the click event of the img to function in which you toggle your division display
you can have multiple images, referring to multiple containers(or same containers), which are hidden by default, but as you click on the relative image, it would appear.
see the code below
create your markup like:
<div class="wrapper">
<div class="image">
<img src='../images/actions_button_ok.png' data-target="one" />
<img src='../images/actions_button_ok.png' data-target="two" />
<img src='../images/actions_button_ok.png' data-target="three" />
</div>
<div class="target" id="one" >
this is text A
</div>
<div class="target" id="two" >
this is text B
</div>
<div class="target" id="three" >
this is text C
</div>
</div>
and your jquery code as:
$(document).ready(function(){
$('img').on("click",function(){
$('.target').hide();
$('#'+$(this).data('target')).toggle(1000);
});
});
basically, your html structure can be of your choice, but that's how you should go about it.
explore more about jquery.
see this fiddle.
instead of binding click to img, you can bind it to your li aswell.