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;
}
We have a viewer with coded on openseadragon. It has zoomin zoomout home and rotate functions. We also add some custom transparent canvas on this viewer for draw some shapes on that picture. They works fine but we cannot drag that pictures and also cannot get div coordinates that picture on these multi canvas.
How can we reach mouse move or click and drag events on this multi canvas.
Thanks all for helping.
Example code here:
<div class="container">
<div class="area">
<div id="viewerImage1"
class="openseadragon">
<script type="text/javascript">
var meta = null;
var viewer = OpenSeadragon({
id: "viewerImage1",
prefixUrl: "/openseadragon/images/",
tileSources: {
type: 'image',
url: '/openseadragon/images/example-images/sample.jpg'
}
});
</script>
</div>
<canvas id="canvasDrawArea01" class="canvas" width="300" height="250" style="cursor: move;"></canvas>
<canvas id="canvasDrawArea02" class="canvas" width="300" height="250" style="cursor: move;"></canvas>
</div>
</div>
I recommend trying the canvas overlay plugin:
https://github.com/altert/OpenSeadragonCanvasOverlay
… it should help with these issues. Let me know how it goes!
I have always found replies to my questions here even before I asked them. Right now I am facing a problem regarding the responsive adaption of a site I created (www.cichlidae.com) that led me to post this question after several years of just reading.
In my site, when a break-point is reached, a left side menu bar seen in all pages hides. I would like this bar to be displayed over the content on demand, when a mobile device is used. I was able to make the top menu bar adapt responsively to display and the #bar to hide.
For trying to display the left bar menu (with a div labelled “bar”) I used the following CSS code:
#bar {
display:none;
}
#bar ~ .display_bar:focus {
display:block;
}
I set #bar first as that is the order in which the code for #bar loads once the page is loaded (I tried .display_bar:focus ~#bar as well). I created an icon displayed in mobile view to activate the display switch:
<div class=\"display_bar\">Some graphic</div>
I have tried all combinations and browsers, validated CSS and HTML, but the bar just won’t show when the icon is clicked on. I have tried with a single <p> tag with a class name instead of #bar but it ignores it as well. One of the example of pages could be seen in the URL:
http://www.cichlidae.com/index_catalog.php
What could I be doing wrong? I need the left bar to show on demand when in mobile view, preferably just with CSS. Thanks so much for any help you could provide me.
The relevant HTML code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>All cichlid species - Cichlid ..</title>
<link rel="stylesheet" type="text/css" href="design/styles/indexstyle.css" title="Cichlid ...">
...
</head>
<body>
<!-- left frame -->
<div id="bar">
<img src="design/graphics/logos/logo_menu.jpg" width="200" height="165" alt="Cichlid Room Companion"><br><br>
...
<div style="padding-left:10px;">
<h3>Catalog</h3>
Classification<br>
....
</div>
</div>
<!-- right frame -->
<div id="main">
<div id="canvas" style="max-width:800px">
<!-- Menu bar -->
<ul id="menu" class="r-hide">
<li>Home
<div class="dropdown_3columns">
<h2>Welcome ...</h2>
</div>
</li>
</ul>
<div class="r-only">
<div id="r-navigation-menu">
<input type="checkbox" id="r-navigation-button">
<ul class="r-menu-items">
<h2>News</h2>
<li>What's new</li>
....
</ul>
<label for="r-navigation-button" id="r-navigation-label">
<div class="r-drop-icon">
<img src="design/graphics/icons/menu-hamburger.png" class="icon" width="32" height="32" alt="">
...
</div>
</label>
</div>
<div class="display_bar" tabindex="-1"><img src="design/graphics/icons/menu-collapse.png" class="icon" width="32" height="32" alt=""></div>
</div>
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!
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>