I am facing some problem what i have now is there are images render in a div and and there anchor tag inside div when user clicks on image
an overlay screen will open where i have to display pdf files i have used TouchPdf plugin now what i want is there will be arrows buttons on overlay screen which will navigate to next pdf file and displayed on overlay screen.I am getting difficulty in achieveing this Thanks All
this how images are rendered
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="image-div-conents">
<h3 class="circle">BI</h3>
<div class="doc-name-date">
<!-- <ul class="list-inline"> -->
<span class="bill">Bill</span>
<span class="bill">2-02-2017</span>
<!-- </ul> -->
</div>
</div>
<a href="#">
<img height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
<div class="validitity"><span>Validitity: Forever</span></div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="image-div-conents">
<h3 class="circle">BI</h3>
<div class="doc-name-date">
<!-- <ul class="list-inline"> -->
<span class="bill">Bill</span>
<span class="bill">2-02-2017</span>
<!-- </ul> -->
</div>
</div>
<a href="#">
<img height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
<div class="validitity"><span>Validitity: Forever</span></div>
</a>
</div>
this will continue and images are rendered horizontally
What i have tried is--
Add click event
$('.thumb a').on('click',function(){
alert($(this).attr('href'));
alert($(this).index());
});
but index is always 1 for each href as there are seprate div's and there is only anchor tag inside it.
You need to create a topmost parent element which has all the divs
You can create a div
<div class="parent> all your divs etc </div>
$('.thumb a').on('click',function(){
alert($(this).parentsUntil("thumb").index()); //Here the index will be the clicked index.
});
The problem is you are using
The problem is that tha click event is on a tag and # takes to top of the page.You should always use javascript:void(0).
Related
I am making a single page site that has containers which act as stops from the navigation links at the top of the screen which you can read that particular containers information. I have a button to Read More and here is the problem.
I am working on a services page that has a overview of services but I am trying to get a button that the user can click to learn more but I would like that services.html file to load into that container without leaving the current location on the page ie the new information would slide in from the right so the user can read and once done they can close the loaded information and still be where they were currently at in the one page site. I hope that makes sense? Thank you for your help!
I have tried calling the page via a <li> tag and a href but I get information cant be loaded.
<section class="single-items center-block parallax" id="corporate" style="background-color: cadetblue">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-8 col-xs-11">
<div class="area-heading text-start wow fadeInLeft">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100">
<a data-fancybox="group-three" href="images/single-portfolio3.jpg">Complete <strong>Services</strong></a>
</h3>
<p class="text-white">For a full list click below</p>
<a class="btn btn-transparent-white btn-rounded btn-large mt-4" data-fancybox="group-three" href="images/single-portfolio3.jpg">View More</a>
</div>
</div>
<div class="col-md-7 col-sm-4 col-xs-1"></div>
</div>
</div>
<div class="hidden">
<a data-fancybox="group-three" data-thumb="images/gallery-thumb1.jpg" href="images/gallery-thumb1.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb2.jpg" href="images/gallery-thumb2.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb3.jpg" href="images/gallery-thumb3.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb4.jpg" href="images/gallery-thumb4.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb5.jpg" href="images/gallery-thumb5.jpg"></a>
</div>
I prepared a DEMO to show you some interesting thing. This demo contains basic blueimp gallery setup example, nav bar and button.
<div class="nav">nav</div>
<div class="wrapper">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" class="image" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" class="image" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" class="image" alt="Orange">
</a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<button type="button" class="button">Click Me</button>
When user click image, it opens and occupies the full screen, but if.wrapper has a relative position, image won't be occupies full screen, because nav bar will overlap the image.
Try it yourself.
Open demo.
Click image.
Close image.
Click button.
Click image.
After that you will see, nav bar will overlap the image.
How to fix that problem?
When You are making div relative, You are also adding z-index: 1 to it - and You navbar has z-index: 10 already, so that's the main cause of such behavior.
Try adding z-index greater than 10 to relative div in Your stylesheet:
&_relative {
position: relative;
z-index: 11;
}
I have my angular directive, and that is some div's with around it an but when I click on the div it doesn't reload my page.
Am I doing something wrong?
This is the full directive
<div class="col s12 m6 l4">
<div class="video-card">
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-image">
<img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
</div>
</a>
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-content">
<div class="card-title-box">
<a href="#/videos/detail/{{video.Id}}">
<span class="card-title grey-text text-darken-4">
{{video.Title}}
</span>
</a>
</div>
<div class="card-action">
<div class="more-info">
<span class="group grey-text">
{{ video.Author}}
</span>
<a href="#/groups/detail/{{playlist.Id}}/List/{{video.Id}}" ng-if="playlist">
<i class="mdi-av-play-arrow right tooltipped black-text small "
data-position="top" data-delay="0" data-tooltip="{{'video.playFromhere' | translate}}"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I need to reload the page due to a bug in a plugin I'm using on the detail page, and nor the author of that plugin nor I can figure out what is happening, and the only way to get it work is to reload the page when going to a video.
You can reload a page in Javascript using window.location.reload()
Target only sets which frame the link should act on. So if you want the document to reload use
window.location.reload();
I'm creating a website for a music festival (a small one). Like you can see in this example : http://bioa7.belleileonair.org/ (This is only a test website).
I would like to have collapse div when I click on image, witch show the information about the artist. when I click on an other image, I would like to hide the active div then show the other corresponding to the image click.
Before asking on stackoverflow, I'd already tried some code related to bootstrap collapse. Like you can see in "Samedi soir" section when I click on the image, it work but if I click on the second one, the div related to the first image doesn't close. I think Javascript is needed but I do not understand anything about it.
I'd like some advise about what I want to do. Is the collapse function the best solution in this case, or maybe another solution is better?
My code :
<section id="saturday-night">
<div class="full-container">
<div class="row">
<h2>Samedi Soir</h2>
<div class="panel-group" id="accordion">
<div class="grid">
<div class="panel panel-default">
<figure class="effect-lily">
<img src="images/artistes/12.jpg" alt="img12"/>
<figcaption>
<div>
<h2>First <span>Image</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</div>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
</figcaption>
</figure>
</div>
<div class="panel panel-default">
<figure class="effect-lily">
<img src="images/artistes/12.jpg" alt="img12"/>
<figcaption>
<div>
<h2>Second <span>image</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</div>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 1</a>
</figcaption>
</figure>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
<p>Contents panel 1</p>
</div>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
</div>
...
It's soooo simple. Just make your Collapse tab on bootstrap properly. Simply replace the text of that tab with image src. Leave everything as it is. That's it.
I wanted to know why isn't the drop down menu working. When I click on the drop down menu it does not appear. I am using bootstrap. Please tell me why it isn't working.
<li id="megamenuID" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Categories
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div >
<div class="row">
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-4 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
</div>
</div>
</li>
</ul>
</li>
Have you included in the header the bootstrap.js script file? The main reason why it won't work is because you either haven't included it, or you miss-typed something.
Can you show us what scripts you have included?
And also, please run the page on Mozilla (if possible), open the console and post the screenshot here. We will be able to see if there is any javascript problem.
EDIT: (based on OP first comment)
As far as I can see, you have included <script src="Scripts/jquery-1.9.1.js"></script>, but have not included the bootstrap.js file.
Include it like this: <script src="Scripts/bootstrap.js"></script> and it should be working. (of course, if the bootstrap.js is located in the Scripts folder. If it is in another folder, change the path properly.)
If this won't work again, do a screen shot from the Mozilla console only, and show us what is going on there.
EDIT 2: (based on OP first comment)
Also, remove one of these two:
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
You either want to use the bootstrap.min.css which is minified and for huge css files is better to use min version so it won't create a lot of trafic, or you will use the non-minified version i.e. bootstrap.css.