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();
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
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">
Say I have a carousel and a container right under it. How do i make the container scroll ontop of the carousel? Sort of like a parallax effect I guess.
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
<div >
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<p>123</p>
</div>
<div class="col-lg-4">
<p>456</p>
</div>
<div class="col-lg-4">
<p>789</p>
</div>
</div>
</div>
something like in this site http://themenectar.com/demo/salient-promo/
I think you can use this codepen idea : http://codepen.io/JTParrett/pen/BkDie
You will set it up like that :
<div class="box" data-scroll-speed="2">S</div>
The highest data-scroll-speed is, the slowest it will scroll.
You'll require jQuery, but the result would be something like that :
https://jsfiddle.net/mk0hdtsj/2
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
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.