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.
Related
I have a portfolio webpage, where I need describtions and and "Image"-tag to show, when the projects are clicked. For this I am using toggle, javascript.
I currently have this piece of code, where I want the span.class and the paragraph to both expand when the project is clicked. Otherwise I wish that both elements remain hidden on the page. Right now I cannot make span.class hide before toggle, and so only the paragraph show on toggle, which causes the whole thing to look wierd. This is the code I am using.
$(document).ready(function(){
$(".li_element").each(function(index) {
$(this).find('p','span.PopUp').first().hide();
});
$("li").click(function(){
$(this).find('p','span.PopUp').first().toggle();
$(this).toggleClass("expand");
});
});
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Lirma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<span class="PopUp" >Images</id>
<p style="display:none;">
Typedesign
</p>
</div>
<div id="myModal_1" class="modal" >
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
</div>
<p>Type design</p>
</div>
</div>
</div>
</li>
Just one string:
$(this).find('p,span.PopUp').first().hide();
or maybe you want
$(this).find('p').first().hide();
$(this).find('span.PopUp').first().hide();
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
I have a fiddle like this http://jsfiddle.net/roxds51h/2/ - there is macbook pro with embedded carousel that contains two pictures. User can switch the pictures by clicking the white dots on the screen. I want to remove the dots and give the possibility of changing pictures by clicking the texts below:
<div class="row">
<div class="col-sm-6">
here is one text //after clicking that
//the first picture should
//appear on macbook
</div>
<div class="col-sm-6">
here is second text //after clicking that
//the second picture should
//appear on macbook
</div>
</div>
How can I do that?
Also, now the pictures are changing automatically every couple seconds - how can I disable it?
Thanks!
You can easily achieve that with this code:
<div class="row">
<div class="col-sm-6" data-target="#17" data-slide-to="0">
here is one text
</div>
<div class="col-sm-6" data-target="#17" data-slide-to="1">
here is second text
</div>
</div>
To disable autoplay change data-interval="5000" to data-interval="false".
<div id="17" class="carousel slide" data-interval="false" data-ride="carousel">
Removing white dots:
Remove them from HTML, I mean this code:
<ol class="carousel-indicators">
<li data-target="#17" data-slide-to="0" class=""></li>
<li data-target="#17" data-slide-to="1" class="active"></li>
</ol>
you need to swap the data target and warp your text in <a></a> tags.
HTML:
<section class="introSection">
<!-- Container -->
<div class="container macbook">
<div class="row">
<div align="center">
<img alt="" src="http://www.proalab.com/assets/macbookpro.png" class="mackbook_image">
</div>
<div class="mackbook">
<div id="17" class="carousel slide" data-interval="5000" data-ride="carousel">
<div class="carousel-inner">
<div class="item">
<img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz1.png" style="display: block;">
</div>
<div class="item active">
<img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz2.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
here is one text
</div>
<div class="col-sm-6">
here is second text
</div>
</div>
</section>
CodePen Demo
Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?
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 :)