I am seeking to create a website with a very smooth layout, like it is all dynamic and not just BLAM, heres a website.
Let me elaborate:
I got this setup for now, just so you can figure what I am trying to get working.
What I mean by dynamic is, that I want when the page have been loaded I would the image to come sliding in (maybe the banner too, haven't decided all design yet, just throwing suggestions.). When image have slided in I would like it to be expanding and despanding slowly, like it's always in movement. When hovered over it should expand slightly more and stop it's movements while it is hovered.
This are the main needs I am searching for, and I am a little clueless on how it is done.
I was thinking javascript was obvious, but I've failed any guides I've found and therefore belive I need some direct help.
Highly appreciated, thanks!
I've tried making the image fade in and out with jquery, but doesn't seem to work, heres my code:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url("images/BG.png") repeat;
}
.logo {
width: 640px;
height: 360px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 40%;
margin: auto;
text-align: center;
}
.middlebanner {
width: 100%;
height: 60%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100%;
margin: auto;
text-align: center;
}
</style>
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<title>Electronic Future Copenhagen - Choose your game</title>
<img src="images/middlebanner.png" class="middlebanner" />
<img src="images/logo5.png" class="logo" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
jQuery
<script src="jquery.js"></script>"
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
$( document ).ready(function() {
$("#logo").animate({
left: "300"
}, {
duration: 2000
});
$( "#logo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
});
</script>
</body>
</html>
here is a little fiddle to get you on your way...
Just animate divs and images etc to get the desired effect.
$(document).ready(function () {
$("#efclogo").animate({
left: "300"
}, {
duration: 2000
});
});
Added a hover over function so you can see how that works too.
$( "#efclogo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
Updated fiddle
Here's a part of code that might help you:
//Above is pure JS(no jQuery) which does the loading part, aka pre-loader
$(document).ready(function() {
//Here is when loading is 100% completed, will trigger the function
$(window).load(function() {
loadComplete();
});
});
This is where you should get started when you decide to use jQuery library.
Slide down
https://api.jquery.com/slideDown/
Animate
https://api.jquery.com/animate/
Hover
http://api.jquery.com/hover/
Your idea might be a little confusing to site visitors. Think about a page you are looking at where everything is flowing around so you cant find anything.
The key is to have a "normal" page and let some eyecatching elements fly around.
The technical aspect depends on what you want to archieve. First you need to think about the browser performance (on mobile especially).
One way to archieve this would be jQuery animate, anotherone would be css3 animate/transition. The easiest example of jQuery animate is in the api: https://api.jquery.com/animate/. Apparently I dont have a css tutorial in mind.
Related
I have a Wordpress site, that shows maps of fictional worlds. The maps are leaflet.js maps, that are displayed within a div called map. This div is not created with the divi frontend, but in a html file that gets included through a plugin shortcode. Basically the php plugin loads a bunch of map specific settings to provide to the leaflet map and shows some html.
Now I want this map div to be as high as possible without causing a scrollbar.
I've tried different things:
height: 100% - does not show anything at all, apperantly an issue with the parent elements
height: 100vh - way bigger than the screen and triggers a scrollbar
height: 74vh - fits on my 2.5k screen but not on others
setting height according to window.innerHeight is too large
setting height according to window.innerHeight and substracting the pixel count of the header and footer is too large too
Whatever I try, I either get a scrollbar or a white stripe below my blue footer. You can see it live here: https://fictionalmaps.com/audience-map/?creator=1&map=KisandraShowCase
My latest - not working - iteration of the code I include with php looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<!-- meta name="viewport" content="width=device-width, initial-scale=1.0" -->
<!-- some css files are loaded here needed for the leaflet map itself - none should interfere with the map div -->
<style>
html, body {
padding: 0;
margin: 0;
}
#map {
width: 100%;
max-width: 1024px;
height: 70vh;
max-height: 1024px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var tempHeight = window.innerHeight;
jQuery('#map').height(tempHeight);
</script>
<!-- some js files are loaded here needed for the leaflet map itself -->
</body>
</html>
This produces a scrollbar. If I try e.g. var tempHeight = window.innerHeight - 340; I can get it to fit nearly, but get a white stripe below the footer. Also it's not consistent across computers.
My CSS game is weak, I need some help! I'm stuck in an unsuccessful trial-and-error loop and running out of ideas what else to try.
Use position absolute and give it a top: 0; and bottom: 0; that way iot will use the entire screen height.
#fullscreen {
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="fullscreen"></div>
</body>
I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
In JQuery Mobile 1.4 panels can be external, fixed and responsive which led me to try to create a persistent sidebar using a panel. Everything seems to work great except that the panel is closed every time a page transitions. The panel is then opened again when the new page is shown.
jsfiddle: http://jsfiddle.net/egntp/
I would like for the panel to remain on the page during page transition similar to the way persistent toolbars work.
Any ideas? I looked into the panel's beforeClose() event (http://api.jquerymobile.com/panel/#event-beforeclose) to try to prevent it from closing, but I didn't know how to proceed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
<style type="text/css">
.ui-panel-dismiss{display:none;}
#p1, #p2{margin-left:17em;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){$("#sidebar").panel();});
$(document).on("pageshow", ":jqmData(role=page)", function() {
$("#sidebar").panel("open");
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="panel" data-animate="false" data-position-fixed="true" data-swipe-close="false" id="sidebar">
<h1>sidebar</h1>
Page 1<br />
Page 2
</div>
<div id="p1" data-role="page">
My page 1
</div>
<div id="p2" data-role="page">
My page 2
</div>
</body>
</html>
I'm trying to do similar things, playing around with mild success here and there....try starting with this and see how far you can take it...
.ui-panel-closed {
width: 17em !important;
visibility: visible !important;
}
The reason this may work is because all jQuery Mobile is doing when you open or close a panel is they are modifying the css classes of the panel div. One thing they do is toggle a couple css classes, ui-panel-open and ui-panel-closed.
The above css ensures that even though they add the ui-panel-closed class to the panel div, the panel remains open.
You can do this in jQuery mobile 1.4 onwards. Just place the panel outside your page (i.e. data-role="page").
Note that external panels need to be initialized manually. So just do the following:
$(document).on( "pageshow", "[data-role='page']", function() {
$( "your_panel_selector" ).panel({ animate: true });
});
I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck