I am new to HTML, CSS, and JavaScript, although I know Java.
I want an image gallery, which I have down, but the only thing I am able to code opens in a container at the bottom of the page. So what I coded to make it more "professional" was some JavaScript functions to: first of all open it, save the y-position, and scroll all the way down, creating the illusion that it opened the image. After, when you click x, it will scroll up to x=0 and the saved y-position, and it will close the window.
Everything works, but the variable for the y position only saves as 0. Here is the portion of HTML code calling for it:
<img src="image.jpg" alt="An Image" style="width:100%" onclick="myFunction(this);">`
Here are the JavaScript functions:
var windowy;
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
windowy = window.screenY;
window.scrollBy(0, 999999999999999);
}
function quitall(imgs) {
imgs.parentElement.style.display='none';
window.scrollTo(0,windowy);
}
And finally, here is the html code for closing and scrolling to "windowy":
<div class="container">
<span onclick="quitall(this);" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
I am new to this, so if you ask me what "this" or "imgs" are in the function's brackets, I don't know. I just need to know what I'm doing wrong when declaring the variable.
My suggestion would be to try window.pageYOffset if you want to capture the scroll of the page position.
More info about it https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset
It looks like window.scrollBy(0, 999999999999999); is causing your page to scroll to the bottom (999999999999999px in fact) -- you most likely intend to scroll to the top of the newly updated expandImg element. Use window.scrollTo(0,expandImg.offsetTop); to scroll the window to the top of offsetTop.
Related
after a little advice. I'm working on my portfolio and I'm using a css transition to animate an element with some contact information which becomes active when the user scrolls up.
Within this element there is a figure class element called '.top-bar-avatar' which I have added a tool-tip and bounce animation too. This is all working but what I would like to achieve is for the tool-tip to automatically display and animation to fire when the figure is displayed within the web browser.
HTML
<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick" title="Find Out More About Me" data-toggle="tooltip" data-placement="bottom"></figure></li>
JS
$('[data-toggle="tooltip"]').tooltip();
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
}
lastScrollPosition = newScrollPosition;
}
Tried a few different ways of doing this with yet to succeed. Any advice would be appreciated. Cheers in advance
I seem to have resolved this myself, i simply added and removed the display attribute and modified it's value within my existing code, see below.
Oh I also added a div id called 'profile-pic' to the image element, rather than focus on the figure class it's contained within.
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
// display tool-tip when top-bar animates in
$('#profile-pic').tooltip('show');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
// hide tool-tip when top-bar animates out
$('#profile-pic').tooltip('hide');
}
lastScrollPosition = newScrollPosition;
}
I have gone through the answer posted earlier on this website but my slideshow does not work and shows the first image always.
Below is my code
<div id= slideshow>
<img class ='imagem_artigo' src="/images1/coveover.jpg" name="Myslide" width=750; height=300 align="middle">
<script type="text/javascript">
var step = 1;
var img1 = new Image();
img.src = "/images1/tecover.jpg";
var img2 = new Image();
img2.src = "/images1/te.jpg";
var img3 = new Image();
img3.src = "/images1/te1.jpg";
var img4 = new Image();
img4.src = "/images1/im7.jpg";
function slideshow(){
document.images.Myslide.src = eval("img" + step+".src");
if(step<=4)
step++;
else
step = 1;
setTimeout(function(){slideshow()},1000);
}
slideshow();
</script >
</div>
When building sliders it's better to write the majority of what you want to show in the DOM so it'll load and search engines can find it etc.
Here's what I would do
<div id="imageSlider">
<div class="imageSliderContainer clearfix">
<div class="article">
<img src="/images1/coverover.jpg" width="" height="" alt="write stuff here etc" title="">
</div>
<div class="article">
<img src="/images1/tecover.jpg" width="" height="" alt="" title="">
</div>
<div class="article">
<img src="/images1/te.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/te1.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/im7.jpg" width="" height="">
</div>
</div>
</div>
using alt and title will mean your html will be wc3 compliant ;) also the image can be found using an internet search :) or whatever
Now you wanna build a slideshow huh? I'll show you some cool CSS to get you going first then I'll come back to the javascript :p
first off, we want to make sure people who haven't got javascript enabled are able to view your images don't we? So lets make a nice scroll window looking thingy for those special paranoid people with no javascript :p
#imageSlider{overflow:auto;}
Now anything that's over 100% width of #imageSlider will be scrollable.
I've used classes called articles. The reason I've done this will become much clearer later :) but for now this is simply why.
There are 5 articles and you want each to be 100% of the parent so that the others aren't showing when you're on that image right? So 5*100=500
.imageSliderContainer{width:500%;}
100/5=20
.imageSliderContainer .article{width:20%;float:left;}
.clearfix:after{clear:both;display:block;visibility:hidden;content:'';}
Now each article/image will be 100% width of the parent so they won't be visible when one is selected :p
and the clearfix and float will make the articles inline with each other :) without causing conflicts with other elements
Next we want to make sure our images look cool inside the article. and they're properly positioned and sized so they're not outside of the container etc.
.imageSliderContainer .article img{max-width:100%;height:auto;display:inline-block;}
.imageSliderContainer .article{width:20%;text-align:center;background:#000000;}
now things should be starting to look rather nice and smooth right? IF you're still following :p
Next comes the javascript. I'm more fluent in jQuery but I'll give examples of both just incase :)
First off we want to turn off the scrolling
$('#imageSlider').css({'overflow':'hidden'});/*jquery*/
document.getElementById('imageSlider').style.overflow="hidden";/*javascript*/
Next we want to make the images 'change' when really what I'm going to do is scroll the element along so we can see the next one ;p
Some people like to use a negative margin left but some designers are like "AGHHHH NEGATIVE VALUES" for some reason so I'll just use scrollLeft instead :p
this is where it's ganna get a little complicated. First you want to get the current location of the container's scrollLeft then adjust it.
/*jQuery*/
function nextSlide(){
var sliderScroll=$('#imageSlider').scrollLeft();
var artWid=$('.article').width();
var artQuant=$('.article').length;
var next=0-(sliderScroll==((artQuant-1)*artWid))?0(sliderScroll+artWid);
$('#imageSlider').animate({scrollLeft:next},500);
}
/*javascript*/
function nextSlideA() {
var slider=document.getElementById('imageSlider');
var art=document.getElementsByClassName('article');
var next=0-(slider.scrollLeft==((art.length-1)*art[0].offsetWidth()))?0:(art[0].offsetWidth()+slider.scrollLeft);
document.getElementById('position').innerHTML=next;
slider.scrollLeft = next;
}
the variable next will equal 0 if you're on the last image and will go to the next image if you're in the middle of the slideshow :)
Javascript won't look as fancy as jQuery but it'll get the job done. I'm sorry if I've made any mistakes I'm currently on the phone as I'm writing this, let me know if something doesn't work and I'll fix it :)
Next just simply call the function using your setInterval();
var slider=setInterval(function(){nextSlide();},1000);
And job done :) Hope this was helpful! I'll make a quick jsfiddle for you so you can see how it all works :)
http://jsfiddle.net/s6crzzfr/
I need to adjust the container div height so that it keeps the footer at the bottom of the window onload and onresize when the content is too short but not if content pushes the footer off. I've tried variations of the css min-height:100% but it doesn't work. I've managed to make it work onload with this:
<div class="header></div>
<script>
var h = window.innerHeight-205;
document.write('<div id="container" class="container" style="min-height: ' + h + 'px;">');
</script>
....content of container....
</div>
<div class="footer"></div>
but when the window is resized my footer ends up in the middle of the page or off the page. I've tried calling a resize function but never seem to get it to reset the height. The codes I tried were:
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").setAttribute("height",h);
}
and
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").height = h;
}
I'm trying to use only javascript and css, not jquery. I'm not too familiar with JS so if I'm missing something to make the function call work please let me know! I'm not concerned about older browsers, just IE9+ and such, it also needs to work on iPads when the user rotates their screen...
Any help will be appreciated!
Try using a css aproach, like the one outlined here: http://www.cssstickyfooter.com/
So I have a section where I'd like to click on the image and have .speaker-info animate open by toggling class .open on .speaker-container to animate the height to reveal .speaker-info while toggling the class .hover for a hover state image. A .fade class also gets toggled on to .speaker-info to change the opacity. I got everything working fine if I click one image and close it with the same location, but when I open one and click another image everything closes, so I'll need two clicks to open the other, and the hover image states on for the previous image.
So I'd like to open one div and then if another image clicked, all close and the recent one opens.. I've been going around in circles trying to figure the best way to do this.. but I keep hitting a wall.
I'm basically triggering everything by toggling css classes to create the opening/closing and hovering.
Here's my code.
Also, I'm looking for opinions on how to make my code more nimble, and more efficient, sometimes I feel like I write waaay to much where I could do the same with a few lines less.
Thanks!
<section id="speakers">
<div class="container">
<div class="row">
<div class='speaker-container'>
<div class="span3 offset1" id="{row_index}">
<div class="speaker-img">
<img src="{speaker_image}" alt="{speaker_name}" class="hover">
<img src="{speaker_hover}" alt="{speaker_name}">
</div>
<h4>{speaker_name}</h4>
</div>
<div class="speaker-info">
<button class="close-speaker">Close</button>
<h3>{speaker_name}{if speaker_title}, {speaker_title}{/if}</h3>
<p>{speaker_bio}</p>
</div>
</div>
</div>
</div>
</section> {!-- /End Speakers --}
Javascript codes
$('.speaker-container').each(function(){
var containerHeight = $(this).height();
$('.speaker-info').css({ 'top' : containerHeight});
});
$('#speakers .span3').on('click', function(){
var containerHeight = $(this).parent('.speaker-container').height();
var h = $(this).next('.speaker-info').height();
var totalHeight = containerHeight + h;
$(this).find('.speaker-img').children().toggleClass('hover');
$('#speakers .span3').not($(this).next('.speaker-info')).next('.speaker-info').removeClass('fade');
if (!$('.speaker-info').hasClass('fade') && !$('.speaker-container').hasClass('open')) {
$(this).closest('.speaker-container').css({'height' : totalHeight}).addClass('open');
$(this).next('.speaker-info').addClass('fade');
} else {
$('.speaker-container').css({'height' : h}).removeClass('open');
$(this).next('.speaker-info').toggleClass('fade');
$('.speaker-info').removeClass('fade');
}
});
$('.close-speaker').on('click', function() {
var container = $(this).closest('.speaker-info').height();
$(this).closest('.speaker-container').css({'height' : container}).removeClass('open');
$('.speaker-info').removeClass('fade');
});
I suggest you can use JQuery for that feature you want to do. Here's the link for your reference: JQuery Accordion. I hope it helps. Thanks!
Basically, this is what I'm trying to do. I have content, a form, a the bottom of my page, with its display set to none. What I want to do, is when someone clicks an up arrow, the image icon, the whole form will slide UP into view, and become visible, while if they click the arrow again, it will return the form to slide back down and also set its display back to none. This is what I have so far.
<div class="hidden_panel_wrapper">
<div class="hidden_panel_icon"> <img id="hidden_panel_icon" src="thumbnails/up_arrow.png"> </div>
<div class="hidden_panel hide" id="hidden_panel">
<div class="hidden_panel_form">
<form name="newsletter_subscribe" method="post" action="subscribe_success.php">
<input class="text_input" type="email" placeholder="Type E-Mail Address" name="email">
<input type="submit" class="button_input" value="Subscribe To Our Newsletter">
</form>
</div>
</div>
</div>
So I know that to use slide toggle, slidedown will bring elements into view, but i cant figure out how to slideUP and bring an element into view. I looked around at jquery animate, couldn't really figured it out, and i also just looked at setting new styles via javascript (object.style.top="-200px" but that didnt really work. To be simple, I need a slidetoggle, but so it my content will slide UP into view, and DOWN back to display="none". Thanks in advance!
I believe this is what you are wanting. http://jsfiddle.net/bR6Fs/
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption").slideUp(500);
};
var hide = function() {
$(".caption").slideDown(500);
};
$(".featured-image").hover(hide, show);
jQuery animate plus some creativity should work. You'll have to tweak some parts of this based on the kind of animation you want and what you know about where you want it to go, but the framework should work.
The script:
//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').css({'top' : moveDistance+'px', 'display' : 'block'});
$('.hidden_panel_wrapper').animate({top:0});
Then to slide it out it's basically the reverse:
//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').animate({top:moveDistance}).css('display' : 'none');
That said, there are a number of jQuery addons that you can Google for if you're going to be doing a lot of animation and want a bigger toolkit for prebuilt functions.