Using Featherlight jQuery plugin and setting text as the content of my lightbox, my lightbox's width is about 80% of the screen: http://goo.gl/4BVzHM. But if I replace the text by a YouTube iframe, the lightbox's width is reduced to 500px or so, cropping the video.
Code:
<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div class='lightbox_content'>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
I tried to use the jQuery binding method too:
$( '#open_lightbox' ).featherlight(
{
iframe: 'https://www.youtube.com/embed/g7fbe-oV-X0?rel=0',
iframeWidth: 1200,
iframeHeight: 800
}
);
Same problem.
(also there are thin white horizontal bands above and below the video, I don't understand why)
To remove the background white color
add background: none; to featherlight-content div
To change the width use '!important`
style="width: 600px !important;
first of all: GREAT STUFF!!
SITUATION: The image loaded in my slider are smaller than the slides container. Using "$FillMode: 5" I can make sure that images have the right size to display within the slides-container, but they are centered.
Q: Is there a way to have them align to the right, so that i can display the caption to the left of it.
TRIED: using CSS to align the image: neither
#slides img { float: left !important };
nor
#slides img {
position: absolute !important;
right: 0px !important;
}
did the job.
A:
After some fiddling and around analyzing the actual sourcecode generated by the script i found out that
using #slides results in a coding error as the tag "" is duplicated (for whatever reason) and would therefor give 2 identical IDs, so better use ".slides" / ""
the following CSS does the job an aligns a smaller image to the right of the slide
.slides {
div {
img {
right: 0px !important;
left: auto !important;
}
}
Jssor slider will fill and align image (in following format) automatically according to $FillMode,
<img u="image" src="url" />
To fill image manually by your self, please remove u="image",
<img src="url" />
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
My footer is perfectly positioned on every computer screen.
But, when I test it on an Iphone, the footer get stuck in the middle of the page and is not repeating itself in a horizontal way.
What can I do, so the footer also stays on the bottom of an Iphone screen and other smartphones?
This is the CSS of my footer:
#footer {
position:absolute;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
Change the position to fixed, hope that can solve this question.
#footer {
position:fixed;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
First, I hope it's for a static page, as dynamic pages could give you even more troubles.
Anyway, it's not a good idea to put the footer at 0 to the bottom, if I had bigger fonts or small resolution (like using a notebook or a smartphone), the content will go below the footer, which is what probably happens to your page. There is a lot of code around the web answering that specific question. And it's called 'sticky footer'.
This is a copy/paste of that page. I hope no one get's offended, there's no need to rewrite it all if it's already out there. If you are not satisfied, just google 'Sticky footer':
How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: It has exactly the behavior I stated. If you zoom your page (Control + '+'), you'll see how the content goes below the footer.
I'm developing an internal web app on our company intranet using PHP. One section of the app displays a couple of high resolution images to the user. These images are in the region of 5000x3500 pixels. Each image has an image map (using rectangular areas), and all works fine in the desktop browsers I've tried.
The problem I'm finding, is that when users access the site via their iOS devices, the images are being rescaled by safari on the device, however the image map coordinates are not being adjusted to match.
An example of the HTML being generated by my PHP is as follows:
<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,5000,500" href="blah1"/>
<area shape="rect" coords="0,500,2500,3500" href="blah2"/>
<area shape="rect" coords="2500,500,5000,3500" href="blah3"/>
</map>
(The actual rectangle coordinates in the image map are calculated as a percentage of the image size).
I know that safari is resizing the image due to memory constraints on the device, but I need to either find a way of scaling the image map to suit, or replacing the image map with something else that will do the same job. Can anyone offer any advise?
This topic was solved here on stackoverflow: jquery-image-map-alternative
The best idea is to use absolutely positioned anchors (also as suggested by steveax) instead of imagemap.
Update
As this is an old question, you might consider using SVG maps these days. They are supported in all modern browsers, works responsively and are as easy to use as image maps. (thanks to user vladkras for reminder)
Why don't you use Responsive Image Maps instead. This way you can still use poly maps for oddly shaped items.
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
It's as easy as adding the script. And one line of javascript:
$('img[usemap]').rwdImageMaps();
Nathan's comment is correct. You need to fix the viewport to prevent scaling. Basically, either specify a fixed pixel width, or set the scale to 1.0 and set user-scalable=no
See this document for reference:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
An alternative to using the area tag is to use javascript with events x/y & bounds for your hit areas.
I ran into this limitation recently on a project where we needed to be able to zoom and this is what I did to solve it:
Split the image up into 4 quadrants
Placed the 4 images into divs with width and height set to 50% and position: absolute;
Absolutely positioned <a> elements within the quadrant's parent element using
percentage values and a high z-index
Like this:
CSS
#map-frame { position: relative; }
.map {
display: block;
position: absolute;
width: 5%;
height: 3%;
z-index: 99;
}
.q {
position: absolute;
width: 50%;
height: 50%;
}
.q img {
display: block;
max-width: 100%;
}
.q1 {
top: 0;
left: 0;
}
.q2 {
top: 0;
right: 0;
}
.q3 {
bottom: 0;
left: 0;
}
.q4 {
bottom: 0;
right: 0;
}
HTML
<div id="map-frame">
<a class="map" href="foo.html" style="top: 20%; left: 20%;">
<a class="map" href="foo.html" style="top: 40%; left: 20%;">
<a class="map" href="foo.html" style="top: 20%; left: 40%;">
<a class="map" href="foo.html" style="top: 40%; left: 40%;">
<div id="q1" class="q">
<img alt="" src="q1.jpg" />
</div>
<div id="q2" class="q">
<img alt="" src="q2.jpg" />
</div>
<div id="q3" class="q">
<img alt="" src="q3.jpg" />
</div>
<div id="q4" class="q">
<img alt="" src="q4.jpg" />
</div>
</div>
Put all the content INSIDE A TABLE. Set to 100% width. The iphone doesnt seem to scale tables... I was struggling with this problem as i had my images just lose, or inside a div.
none of the rect coords links were working. But when i put the whole lot inside a table... Well, just try it and see :)
I dig out this post because I've just found a solution to get image map working on iOS.
Put your map within an anchor and listen click/tap events on it, to check if the target element matches with a map's area.
HTML
<a id="areas" href="#">
<img src="example.jpg" usemap="#mymap" width="1024" height="768">
<map name="mymap">
<area id="area1" shape="poly" coords="X1,Y1,X2,Y2...">
<area id="area2" shape="poly" coords="X1,Y1,X2,Y2...">
<area id="area3" shape="poly" coords="X1,Y1,X2,Y2...">
</map>
</a>
JAVASCRIPT
$("#areas").on("click tap", function (evt) {
evt.preventDefault();
if (evt.target.tagName.toLowerCase() == "area") {
console.log("Shape " + evt.target.id.replace("area", "") + " clicked!");
}
});
Tested on iPad4 with mobile safari 6.0
Do not use Default <img usemap="#map"> and <map name="map"> change it. Like <img usemap="#mapLink"> and <map name="mapLink">. It's working !!!
Simply using a # in the usemap attribute appears to solve the problem on iPhone.
For example <img usemap="#mapLink"> and <map name="mapLink">
My solution was easy. I just assigned a height and width in the DIV's css to match the size of the image and everything worked fine. Original image size was 825 x 1068, so
<div style= width: 825px; height: 1068px;">
...
</div>
Hope it helps.
I solved this with only 1 line of code, no JavaScript. Only CSS, you need to use zoom property to scale your image and everything will work fine, just like this
img {
zoom: 0.3;
}
<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,100%,10%" href="blah1"/>
<area shape="rect" coords="0,10%,50%,70%" href="blah2"/>
<area shape="rect" coords="50%,10%,100%,70%" href="blah3"/>
</map>
please try using percentage values inside coordinates