I'm doing this site: neongirslband.ru, the first row is actually a slider. It works well for 1920px, however the photos gets cropped if the resolution is lower (phones and tablets for example). How to make it so the photo gets resized according to the current resolution? Am I'm doing something wrong here?
The site is hosted on github: https://github.com/AlexKotik/NeonSite
...
<div class="row" id="Photo">
<div class="slider">
<ul class="slides">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
</div>
</div>
...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
fullWidth: true,
interval: 5000,
height: 800
});
});
</script>
hard to say without seeing your css (in the question) but presumably you can set the image to be the background and then use this css
#image_container{
/* change image to your image */
background-image: url('http://mysite.xyz/img/myimage.png');
background-size: contain;
}
Related
Can any one help me how to disappear the images automatically once the page is loaded using css.
$(document).ready(function(){
$('.everine-affilate-no-image').fadeOut('1000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class='everine-affilate-no-image' src="http://www.washingtonbeerblog.com/wp-content/uploads/2012/10/crash_test1.jpg">
<img src="http://shirtoid.com/wp-content/uploads/2010/03/you-big-dummy.jpg">
<img class='everine-affilate-no-image' src="http://prevenblog.com/wp-content/uploads/Dummy.jpg">
<img src="http://uvamagazine.org/images/uploads/2009/0901/0901_RD_dummy.jpg">
i am using the "old" FB Likebox:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("394109690683544");</script>
<fb:fan height="120px;" width="100%" logobar="false" stream="false" connections="12" css="http://myurl.com/facebook.css" profile_id="562615520421911" class="fb_iframe_widget "></fb:fan>
</div>
</div>
</div>
how can i change the css to always have a 100% width? I need to use the box with twitter bootstrap and responisve.
thank you
It will not work, if you look at the code that's generated
<fb:fan height="120px;" width="200%" ...
translates into
<iframe id="f13ed26db2962a6" class="fb_ltr" scrolling="no" name="f2625075f1fd254" style="border: medium none; overflow: hidden; height: 120px; width: 200px;"
Which means that the widget reads only the values as the iframe is set to 200px not 200%
EDIT:
Seems like I was able to hack a bit with jQuery to make that happen, however becaue I can't set the span to 100% even when its display:block I'm using document width to set the span to the appropriate width, however you might need to change that to the width of the parent div. Again hacky but might get you started...
JSFiddle
I'm using a child Wordpress theme (Blanco) and trying to make an image gallery page using jQuery Masonry, except the masonry function doesn't seem to be working, everything just looks like it's floating. The columns have vertical gaps. There's also an error being detected by FireBug. TypeError: $("#pincontainer").masonry is not a function The gallery is located here: www.christaalexandra.com/gallerie/
I have the following code in my header:
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/js/jquery.masonry.min.js"></script>
<script language="javascript" type="text/javascript">
// This line tells the script to run after the page is loaded,
// As well as allows you to use the `$` function within the script
jQuery(function($) {
$('#pincontainer').masonry({
itemSelector: '.pin-gallery',
});
});
</script>
I have the following CSS in my stylesheet:
#pincontainer{
margin:0 auto;
margin-top:50px;
}
.pin-gallery{
width: 220px;
margin: 10px;
float: left;
}
My Gallery page has the following HTML:
<div id="pincontainer">
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/baby_shower_invitation_rocket_baby_spaceship_thank_you_card_stars_1.jpg" alt="" /></div>
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/black_and_white_inspiration_wedding_invitations.jpg" alt="" /></div>
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/blue_rope_ship__ocean_nautical_baby_shower_invitation_thank_you_card_4.jpg" alt="" /></div>
...(more div's here)...
</div>
<!--End Container-->
Why isn't my gallery stacking correctly? The JS file exists in the JS folder in my child template, should it be somewhere else? I've spent hours researching this, and feel as though I've check and double checked potential problems, but I'm at a beginner level, so it could be something very obvious. I would appreciate your help, thank you in advance!
I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>
So, the problem I face is like this:
I have a layer, which it will be placed on top of a pdf on the page. The PDF is either using to embed, or iframe to include it. However, CSS style doesn't apply on PDF (because it is a plug-in? ). Therefore, even I put z-index:1000 for the , that layer still goes behind the PDF. any idea how to fix that?
here is th code:
<style type="text/css">
<!--#apDiv1 {
position:absolute;
left:543px;
top:16px;
width:206px;
height:223px;
z-index:1000;
background-color:#999999;
}
</style>
<body>
<!-- embed the pdf -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : test.pdf
</object>
<!-- layer -->
<div id="apDiv1" >Whatever text or object here.</div>
</body>
After reading some forums... (here some comments)
The PDF is loaded by the Acrobat Reader plugin. It kind of does it's own thing and has nothing to do with any of the HTML or even the browser for that matter (apart from being loaded by the browser).
People have the same problem with the Flash plugin, and there's no solution for that. So I would imagine there's no solution for this either.
Your best bet is to redesign your menus so they don't move into the space occupied by the pdf.
If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.
The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.
My SOLUTION:
Two iframes, each one inside a div with different z-index, when you click the yellow div, the empty iframe is displayed (in front of the pdf iframe), so you can see the green div inside the pdf document.
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
Fernando RodrÃguez
frodale#gmail.com
There is a jquery plugin, bgiframe, that makes implementing this fix fairly simple.
Generally you can get around these z-index issues by placing an iframe shim directly under the div. That is, it has the same size and location (but no actual content). I'm not 100% sure this works for PDFs, but I know this fixes some other z-index issues (such as select boxes on IE6).
iframe shims can be a pain if you're placing the div dynamically, since you have to move the iframe shim with it.
I just found a solution to this. Use the google pdf viewer in the iframe to display your pdf on the page then it works like any other div.
example:
<iframe id="ifr"
src="http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true"
style="width:718px; height:700px;"
frameborder="0">
If it's IE your testing, then it could be the same issue as with ComboBox. Try inserting iframe into div.
A solution for some circumstances is to wrap the iframe with a div and use the style attribute 'clip' on the div, or iframe parent.
<!DOCTYPE html>
<html>
<head>
<title>Test Page - IFramed PDF Document Clipping</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>
<style type='text/css'>
body {padding:0em;margin:0em;font-size:16px;position:relative;}
body * {line-height:1em;}
#TOPNAV {list-style:none;display:block;}
#TOPNAV li {display:inline;}
#IFRAMEWRAPPER
{
display:block;margin:0em;padding:0em;
position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
}
#docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
.clearfix {zoom:1;}
</style>
<script type='text/javascript'>
$(document).ready(function () {
$('#TOPNAV input').click(function () {
$("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
$(this).toggleClass('ACTIVE');
$("#IFRAMEWRAPPER").css("padding", "1em");
$("#IFRAMEWRAPPER").css("padding", "0em");
$("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
$("#IFRAMEWRAPPER").toggleClass("clearfix");
$("#IFRAMEWRAPPER").hide();
$("#IFRAMEWRAPPER").slideDown(2);
});
$('#btnCLICK1').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
});
$('#btnCLICK2').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
});
$('#btnCLICK3').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
});
$('#btnCLICK4').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
});
});
</script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
<ul id='TOPNAV'>
<li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
<li><input type='button' id='btnCLICK2' value='LEFT' /></li>
<li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
<li><input type='button' id='btnCLICK4' value='TOP' /></li>
</ul>
</div>
<div id="IFRAMEWRAPPER">
<iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>
</body>
</html>