I am trying to get a button to appear over an image when there is a mouseover event over the image. I have multiple images on the screen that I would like to have the same functionality. I'm having trouble getting this to work as the button is always present. Any advice on how to get it to work? Below is the rendered html and javascript.
javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function() {
$('.image').mouseover(function(){
$('.munchbutton').show();
});
});
</script>
css
div.munchbutton{
position: absolute;
bottom: 5px;
right: 0px;
left: 60px;
}
div.wrapper{
float:left; /* important */
position:relative; /* important(so we can absolutely position the description div */
padding: 5px;
}
html
<!-- wrapper div -->
<div class='wrapper'>
<!-- image -->
<div class="image" style="position: relative; left: 0; top: 0;">
<a href="/partners/Business/CNNMoney" >
<img src="/static/CNNMoney.png" style="position: relative; top: 0; left: 0;"/>
</a>
<!-- partner munchbutton div -->
<div class='munchbutton'>
<form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
<input type="hidden" name="channel" id="channel" value="CNNMoney" />
<input type='submit' class = 'add' value='Add to plate'/>
</form>
</div>
<!-- end munchbutton div -->
</div>
<!-- end image div -->
</div>
<!-- end wrapper div -->
<!-- wrapper div -->
<div class='wrapper'>
<!-- image -->
<div class="image" style="position: relative; left: 0; top: 0;">
<a href="/partners/Business/EconomistMagazine" >
<img src="/static/EconomistMagazine.png" style="position: relative; top: 0; left: 0;"/>
</a>
<!-- partner munchbutton div -->
<div class='munchbutton'>
<form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
<input type="hidden" name="channel" id="channel" value="EconomistMagazine" />
<input type='submit' class = 'add' value='Add to plate'/>
</form>
</div>
<!-- end munchbutton div -->
</div>
<!-- end image div -->
</div>
<!-- end wrapper div -->
In order for .show() to work, surely you must hide the buttons first!
Working fiddle (the only change is that .munchbutton is now display: none; by default)
Let me know if this is not what you were after.
The original state of the munchbutton should be display: none; and then you can show it from there.
Also when you set the show I assume you are only wanting to show the button within that div so you should probably use $(this).find('.munchbutton').show();
Here a fiddle with a mouseout chained - http://jsfiddle.net/GTw8d/
Related
I have the below code:
https://codepen.io/nht910/pen/qBBOwyN
Snippet:
<div class="post-body d-flex">
<!-- content -->
<div class="post-content">
<p>...</p>
</div>
<!-- button toggle -->
<button type="button" class="btn sticky1 border-white outline-none" style="box-shadow:none;" id="toc-button">
<img src="https://i.imgur.com/NuY1GRF.png" width="25px" height="100px">
</button>
<!-- table of contents -->
<div class="post-toc">
<div class="d-block sticky-top mb-5">
<div>
<button type="button" class=" sticky-top btn outline-none" style="box-shadow:none" id="toc-button-2">
<img src="https://i.imgur.com/s1ej0s3.png" height="20px" >
</button>
</div>
<div>
<nav class="" id="toc"></nav>
</div>
</div>
</div>
</div>
My problem is that I can't make toggle button become sticky with out changing the layout. I tried to change its position to sticky but the layout will change a little bit.
So I think best way is use a Jquery script to make it become sticky. In codepen, if you click on TOC button, it will expand a table of contents, and this table of contents has perfect sticky animation that I want.
Can you please help me to make a script to make my TOC button become sticky in it's father div .post-body?
Thank you guys so much.
Make it sticky, then make absolute positioned wrapper with desired placement and height 100%: https://codepen.io/f278f1b2/pen/vYYNwpz?editors=1100#anon-signup
#toc-button {
width: fit-content;
height: 110px;
position: sticky;
/*margin-top: 30px;*/
top: 0;
margin-bottom: 130px;
}
.toc-wrapper {
right: 0;
top: 15px;
position: absolute;
height: 100%;
}
I have the following css...
<style type="text/css">
.widediv{width:1366px;margin-left:auto;margin-right:auto}
</style>
... that makes me create my page :
<body><div class="widedivv">
<!-- Stuff -->
<div style="background-color:#609ED2"> <!-- Stuff again --> </div>
</div></body>
But I use a 1600*900px screen, and I believe there's a clean way to do what I want :
How to make the color of the div being applied up to the left of the screen/page ?
Because in this case, there will remain a white margin that has this width :
(ScreenWidth-1366)/2
Is this something you like?
Html
<body><div class="widediv">
<div style="background-color:blue; padding-left:350px">
Stuff here
</div>
</div>
< I'd like the color of the div to get to there !
</body>
CSS
.widediv{background-color:blue;width:1366px;margin-right:auto}
cant you do something like this
<body>
<div class="outer-widediv">
<div class="widedivv">
<!-- Stuff -->
<div style="background-color:#609ED2"> <!-- Stuff again --> </div>
</div>
</div>
</body>
and apply css as follows
.outer-widediv{
background : color !important;
position: relative;
}
.outer-widediv:after{
content: ""; display: block; height: 100%;
}
.outer-widediv:before{
content: ""; display: block; height: 100%;
}
js fiddle
I have those pictures
<img class=img src='a' />
<img class=img src='b' />
<img class=img src='c' />
<img class=img src='d' />
<img class=img src='e' />
And this button
<button id=presstostart>PRESS ME TO START</button>
I want once the button is clicked start showing the pictures one by one, a,b,c,d,e with an interval of 2 seconds amongst them.In JQuery.No plugins....
There are many slider plugins you can use. But personally I would recommend flexslider and nivoslider. They're easy to use and customize. You can also find attributes to set animation speed, pause time, slide direction, etc.
I found an example in this url
http://www.jssor.com/development/index.html
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
</div>
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
You will have to download the js library from the link above, and instead of on ready you could assign the event to a click of a button.
yet another example...
http://jsfiddle.net/7WL6P/200/
I'm currently trying to build a mobile image gallery using PhotoSwipe.
I've been able to get it working but there's one small problem. When I
click on a photo thumbnail, the actual photo always takes up the entire
viewport. This is OK when you're viewing the gallery on a mobile device.
But if your viewport is a computer screen and the image isn't a
high-res one, the photo can be very blurry. I'd rather limit the photo
to a width of maybe 300 to 400 pixels when viewed on a computer. Is there
a way to do this in PhotoSwipe? I read the documentation but couldn't
quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
<li>Second Gallery</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><img src="images/01-thumb.jpg" alt="Image 1" /></div>
<div class="gallery-item"><img src="images/02-thumb.jpg" alt="Image 2" /></div>
<div class="gallery-item"><img src="images/03-thumb.jpg" alt="Image 3" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/04-thumb.jpg" alt="Image 4" /></div>
<div class="gallery-item"><img src="images/05-thumb.jpg" alt="Image 5" /></div>
<div class="gallery-item"><img src="images/06-thumb.jpg" alt="Image 6" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/07-thumb.jpg" alt="Image 7" /></div>
<div class="gallery-item"><img src="images/08-thumb.jpg" alt="Image 8" /></div>
<div class="gallery-item"><img src="images/09-thumb.jpg" alt="Image 9" /></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer {
position: relative;
/* other container styles */
}
.pswp {
position: absolute!important;
}
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.
Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
}
.pswp {
position: relative !important;
}
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe() {
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css({
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
});
}
You can find a working example here at CodePen.
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
I tried all sorts of solutions to get this to work properly, including the inline gallery options (demo).
However I couldn't quite get it to work as I wanted as I needed the a specific gallery to display without showing the thumbnails first.
What I did in the end was get a basic PhotoSwipe page working which automatically loaded the images on page load to a full screen, for example using an MVC URL:
/Gallery/Index/1
then simply embed this link in a div using object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
This allowed me to place as many galleries as I wanted in whatever position I wanted without any interference between them.
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.
I want to create a fancybox with the Swipe image slider inside. By following the instructions in the how-to page of fancybox, I create a hidden div where my slider will be put.
<div style="display:none">
<div id="hidden" >
<div id="mySwipe" class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
</div>
Now I use such hidden content to populate a fancybox:
<p align="center"><a class="fancybox" href="#hidden">Click me</a></p>
Unfortunately that has some problem I have the slider with empty (or hidden?) content. In other words I am not getting the slideshow 0 -> 1 -> 2.
I suppose that this problem is caused by the 'display:none' style. In fact if I take this out, the slideshow is working, but it shows the hidden content and I don't want this.
Here I report you the head of my html:
<!-- Add JQuery -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add Swipe Slider -->
<script src="js/slider/swipe.js"></script>
<style>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
/* END required styles */
</style>
<!-- Add Fancybox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".fancybox").fancybox();
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {});
});
</script>
You can try to set instead of display:none
<div style="position:absolute; left:-5000px;">
In this way the result is similar as display:none (the content of the div is not visible) and you should avoid the described problem