I am making a website and I want to make it so that if you click on a button at the bottom of the page you go to a new .html file with a different layout, but I want it to look like that new page is sliding up so that it looks like a cool transition.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
</body>
</html>
I need it to be so that when you click on the picture it goes to a new page, but when it goes to that new page there is a "sliding up" transition.
Thanks!
You can use an iFrame to accomplish this:
JS Fiddle Demo
I used jQuery Transit for the transition effects:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am not sure if it is possible for standard navigation.
Some options that should be possible:
Use JavaScript to navigate (either by putting all on the same page or through AJAX)
Put everything on the same page and use :target and CSS transitions
For option 1 you can still have reasonable URLs in the browser if you use the history API.
I've had success using something like this: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
The only issue is that you may see a brief flash of the new page, which will then disappear, and then be transitioned in. This is more or less unavoidable without using iframes or something similar (something I'm generally loathe to do).
You could also try implementing something like a vertical slider , much like the coda slider but this one is developed for vertical scrolling. Demo.
I tried making these kind of transitions full page and found it difficult. (But I'm a JQ N00B)
Magic slider Offers horizontal and vertical scrolling and could be easier to implement.
Also have a look at this (tutorial here) which might be a simple solution to what you need.
Actually I think this last one is the closet to what you want
Related
I was doing a page with a list of sites I need to visit daily, such as exercise to learn Html, CSS. I would like to know if it is possible to create a link with a page icon that is in the upper tab of the browser (chrome).
Ex: I want to list StackOverflow on my site. So I create a link and for the icon, I want to use the image that is on the tab of the page itself, as in this:
You can use:
https://plus.google.com/_/favicon?domain=www.yourlink.com
example
<a href="">
<img src="https://plus.google.com/_/favicon?domain=www.stackoverflow.com"> Stackoverflow
</a>
If I'm correctly getting what you want, you'd need to either have a local copy or link to the sites' favicon, like so:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" />
I have a basic custom Pin it button. This picks up images inline to the page, but it's not picking up images using the HTML5 picture element with srcset.
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" />
Here's an example of the picture element in use, where the button is not working:
<picture>
<img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg">
</picture>
A very stripped down demo to play with that illustrates the problem: http://codepen.io/michaelpumo/pen/eZyddp
Any ideas?
Update: I might actually have to add that my usecase is a bit more complicated than this. The above is a simplified / stripped down version to illustrate the point. I'm lazy loading these too you see.
Please use the following. It works.
<picture>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" data-pin-description="Hello World">
</picture>
I thought src and description should be there for Pinterest.
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.