retina.js not working - Don't know why - javascript

I don't have much code to put in, but looking for help in order to save what hair is left on my head...
I'm using retina.js, and it isn't working for any of the images. The #2x images are in the same folder as the smaller ones. One if them isn't exactly twice the size - designer sent me an image that was a pixel or two of - so I won't worry about that one as I assume that once the other images are loaded, this one will work when sized correctly.
I've tried shorthand background:url(foo.jpg).... and background-image:url(foo.jpg), with and without the images in "". I've resigned myself to thinking I'm missing something stupid, and am just not seeing it. Any help would be appreciated!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>
HTML:
<ul class="grid" id="movie-grid">
<li class="movie">
<div class="poster"></div>
<h2 class="title">Title</h2>
<p class="desc">TV Movie</p>
</li>
</ul>
and the CSS:
.poster {
/*background:url(../images/comingsoon.jpg) no-repeat left top;*/
background-image:url(../images/comingsoon.jpg);
background-repeat:no-repeat;
background-position:left top;
display:block;
width:204px;
height:137px;
background-size:100%;
}

The problem is that you are trying to use retina.js to change an image within your CSS. I believe that the standard retina.js functionality allows you to change/swap out images within your html code like this:
<header>
<img src="/images/logo.png">
</header>
would change to
<header>
<img src="/images/logo#2x.png">
</header>
In order to get retina.js to swap out images within your stylesheet you will need to download the LESS CSS Mixin provided by the retina.js website. Then follow the steps they outline:
Syntax: .at2x(#path, [optional] #width: auto, [optional] #height: auto);
Steps:
Add the .at2x() mixin from retina.less to your LESS stylesheet
In your stylesheet, call the .at2x() mixin anywhere instead of using background-image
#logo {
.at2x('/images/my_image.png', 200px, 100px);
}
Will compile to:
#logo {
background-image: url('/images/my_image.png');
}
#media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('/images/my_image#2x.png');
background-size: 200px 100px;
}
}
sources:
http://imulus.github.io/retinajs/
http://www.awwwards.com/coding-for-retina-displays-with-retinajs-tutorial.html

Related

Images won't display in Wordpress template

At the moment i got an issue where i have images in my asset folder but when i am converting my HTML/CSS/JS template to wordpress some images won't display and some do. The biggest issue i have is that i have to display the image where you land on the website. This is the CSS code:
#hero {
background: url('wp-content/themes/brandingyou/assets/img/iceland.jpg') center center / cover no-repeat;
padding: 40px 0;
color: white;
position: relative;
width: 100%;
height: 100%;
And here is the HTML code:
<section id="hero" class="demo">
<h1><?php bloginfo('name'); ?></h1>
<div class="container">
<h2><?php bloginfo('description'); ?></h2>
</div>
<span></span>Scroll
</section><!-- Hero -->
And this is the current result:
And it should look like this:
There are several more images that have the same problem. Anyone has a clue why it does this?
NOTE: Not all images have this issue
Note 2: I have tried different file formats, didn't help
The problem is you are including the img via CSS, so height 100%, won´t work, use better 100vh (viewport height), and get sure you are indicating the correct source for the image, if you are working in a theme yo don´t have to search the img in wht folder wp content, just use a relative path like ../img/your-image.jpg or something like that

How can i make a vertical div go horizontal in full screen

I have 2 divs side by side inside a main div. Lets say- left_div & right_div. When browser is in full screen mode- than left_div is 60% and right_div is 40% in width(as, main_div is 100% width).
Now if i restore the browser window and reduce its width- than the divs get underneath each other but still remains the same percentage as 60% & 40% of the screen.
What i want is that if the browser width gets underneath a certain amount than the divs will get underneath each other and also fillup the whole screen width-ie become full browser width.
How can i do it? Do i need to do it with JavaScript or jQuery?
HTML:
<div class="mainDiv">
<div class="left">
test
</div>
<div class="right">
test2
</div>
</div>
CSS:
div.main
{
width:100%;
}
div.left
{
width:60%;
background-color:red;
float:left;
height:100px;
}
div.right
{
width:40%;
background-color:blue;
float:left;
height:100px;
}
#media (max-width: 350px) {
div.left, div.right
{
float:none;
width:100%;
}
}
check this once may be help you here is demo
HTML
<div class="left-div">Left</div>
<div class="right-div">Right</div>
CSS
.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff}
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
#media (max-width: 479px) {
.left-div, .right-div{float:none;width:100%;}
}
Your problem has been many people's problem. While you can write your own CSS, but you should consider screens with different DPIs and different devices and different browsers. But Bootstrap allows you to easily manage these situations.
http://getbootstrap.com/
once you include bootstrap in your page, you can have two DIVs like this
http://jsfiddle.net/Gt25L/119/
<div class="col-md-4"></div>
<div class="col-md-8"></div>
Also look at the tutorials, and they guide you through how to make responsive websites using bootstrap. you will not need any JavaScript. Bootstrap is based on CSS only.
This way you have less CSS to maintain and less chance of wrong behaviour in different browsers & devices over time.

How to dynamically change contents of HTML page based on current window size

I have a simple web page meant as a table of contents to other pages. I have five images used as buttons to those other pages, but I need them to be displayed in a specific way. I have everything centered, and the background is static and doesn't move when you scroll, but the problem is with the buttons.
I would like them to be of a specific height based on the current height of the browser. I say current height because I need it to resize itself if the user resizes the window.
Also, and more importantly, I need this to prevent the table of contents from ever being larger than the height of the browser. I noticed that on different screen resolutions, the images are larger or smaller and can look terrible because of this.
So, for instance, I want the height of there to be the same amount of space between the bottom of the browser and the table of contents, and between the top of the browser and the table of contents, no matter how large the browser window is or the resolution of the user's screen.
I was thinking, through javascript, to grab the size of the window using something like window.innerHeightand set the height of the div encompassing the table of contents to this value.
This is what I have so far, but the script doesn't seem to do anything at all (it's my first time using javascript so I might very well be doing something stupid.):
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
background-image: url(../images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#logo {
width: 200px;
margin-top: 15px;
}
.c1 {
width: 300px;
margin-top: 15px; <!--margin between buttons-->
}
</style>
<title>Some Title</title>
</head>
<body bgproperties="fixed"> <!--static background-->
<div align="center" id="contents">
<div >
<a href="http://somewebpage">
<img id="logo" src="images/logo.png" alt="Logo"> <!--title button-->
</a>
</div>
<div >
<a href="http://somewebpage">
<img class="c1" src="images/img1" alt="image 1"> <!--second button-->
</a>
</div>
<div>
<img class="c1" src="images/img2" alt="image 2"> <!--third button-->
</div>
<div >
<img class="c1" src="images/img3" alt="image 3"> <!--fourth button-->
</div>
<div>
<img class="c1" src="images/img4" alt="image 4"> <!--fifth button-->
</div>
</div>
<script>
var ht = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; <!--Get the height of the browser-->
document.getElementById("contents").style["height"] = ht; <--set height of table of contents-->
</script>
</body>
</html>
You can set this all by CSS but you can go with JavaScript also.
What you need is to set properties in Percentage(%); Such as:
width: 90% (You can replace value as you need to show on screen)
For preventing to not go more than specified width then you can set max-width(Again in percentage)
You can set height as auto.
$(document).resize(function(){
if(document.innerHeight > 350) {
do something
}
});
I agree with other answers in adjusting size, width and height etc. But after reading your question, i think responsive UI is what something you are looking for. Why not you try frameworks like BootStrap to help you. Instead of reinventing the wheel we can use some thing existing that is very easy to use. getbootstrap.com is the url and easy to implement.
(I couldn't post it as comment as i have less reputation :))
You can accomplish your goal two ways:
CSS Media Queries: CSS detects the size of the viewport (window, for lack of a better way of explaining it), and applies certain rules if the viewport matches the #media query. Below are some examples. Also, have a look at this CodePen for a better idea of how it works.
/* If the browser width is anything less than 100px, */
#media (max-width: 100px){
/* Set the height of an element */
#my_element{
height: 200px;
}
}
/* If the browser width is 1000px or more, */
#media (min-width: 1000px){
/* Set the height of an element */
#my_element{
height: 2000px;
}
}
/*
You can also do widths in ranges.
If the width is between 600px and 800px,
*/
#media (min-width: 600px) and (max-width: 800px){
/* Styles here */
}
/* This applies to height as well */
#media (max-height: 500px){
/* Styles here */
}
Another way you can get it done is using percentage units: set the width of your buttons to 50%, and resize the browser window. They should now be flexible. Play around with percentages until your satisfied. Personally, I prefer media queries as they allow for more precision, but take your pick! Hope this was helpful!

Parallax scrolling in Safari on iOS

As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/
It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.

image thumbnail, with max-width, and max-height -- onmouseover, view a bigger image somehow

I've set a thumbnail to have a max-width and max-height and need to set up some kind of onmouseover setup to where when they hover over the image, it shows them a bigger image.
I cannot use links to do this.
Any ideas?
html
<img src="imageurl" class="s3_right" style="max-width: 400px;">
I tried using the code below; however, it messes up because I have a max-width/max-height.
html
<img src="image url" class="s3_right" onmouseover='Big(this);' onmouseout='Small(this);' style="max-width: 400px;">
javascript
<script language=javascript>
<!--
function Big(me)
{
me.width *= 2;
me.height *= 2;
}
function Small(me)
{
me.width /= 2;
me.height /= 2;
}
-->
</script>
There is also the problem that maybe x2 will be larger than the actual image. I don't need the code to expand the image larger than the actual image is. So I would really just need the code to set a new max-width and max-height or popup the image off the page with a max-width and max-height (like, not actually change the layout because the image thumbnails are displaying with text wrapped around them.)
Is it a possibility to just spoof an absolute positioned duplicate, along with the thumbnail, nested inside a wrapping div assigned a relative position?
<style type="text/css">
.meDiv
{
position:relative;
border:1px solid black;
width:200px;
height:100px;
}
.meSmall
{
display:block;
width:100%;
height:100%;
}
.meBig
{
z-index:10;
position:absolute;
left:0px;
top:0px;
display:none;
width:800px;
height:350px;
}
</style>
<div class="meDiv">
<img class="meSmall" src="imageURL" onmouseover="Big();" />
<img id="bigOne" class="meBig" src="imageURL" onclick="Small();" onmouseout="Small();" />
</div>
<script language="javascript">
function Big() {
document.getElementById('bigOne').style.display = "block";
}
function Small() {
document.getElementById('bigOne').style.display = "none";
}
</script>
Obviously the code given won't directly plug into your scenario or win any awards, but it's just to give an idea of the concept.
Using this you could apply whatever size restrictions you want to the wrapping div and/or thumbnail (bugs with max-width/max-height permitting) without affecting the large image or dislodging any wrapped text. You could also use the characteristics of the thumbnail to determine traits of the large image if you need to by employing a bit of JavaScript black voodoo magic (I'm a jQuery fan myself).

Categories

Resources