I am using the zoom function of Magnificic Popup:
<a class="image-popup-no-margins" href="photo.jpg"><img src="thumbnail.jpg" /></a>
I would like to see thumbnail.jpg as the background of photo.jpg while photo.jpg loads right over it. So you click thumbnail.jpg and then a big version of thumbnail shows up, as it is already in cache, and photo.jpg loads right on top of it.
Is that possible? :) Thanks!
Place this before the links you have on page:
<div style="display: none;">
<img src="photo.jpg" />
</div>
and then use library like http://www.appelsiini.net/projects/lazyload to preload the image.
Related
I have something like this:
<div class="panel">
<div class="panel-body">
<div class="image-overlay">
<img class="img-responsive"> src="..."/>
</div>
</div>
</div>
and if I set manually height of "panel-body" to 400px. Its working as it should.
However once opening on small display height stays 400px but image is resized to smaller and half of panel is empty. How can I have responsive image in panel with also panel responsive?
can you try not to put any dimension? try to check this one
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm not sure I understand your question, but I think you're probably looking for this:
<img src="/mysrc.jpg" style="width:100%;max-height:400px;" />
I'm using colorbox on a site but haven't been able to figure out how turn off the title text when hovering over a thumbnail. I want to retain the text to use as a photo caption when you see the full size image, just hide it on the thumbnail hover state.
I've seen some js solutions to completely turn them off, which isn't what I want. I also messed around the with the colorbox js itself and was able to turn off the text for the full size image but that is the reverse of what I want. My skills are HTML and CSS... I have experimented with qtip but that is a little beyond me right now.
My HTML is basically this:
<li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li>
Any help would be appreciated--thanks!
Try using some (hidden) element other than the title attribute, then as a setting in your colorbox, set the title option to a displayed copy of that element, for example:
HTML:
<li class="imgTitle">
<a class="group1" href="images/bigPhoto.png">
<span class="caption" style="display: none;">
I'm a caption that's not in a title attribute anymore
</span>
<img src="images/thumbnailPhoto.png" />
</a>
</li>
JS could be something like this:
$(".group1").colorbox({
title: function() {
return $(this).find("span.caption").clone().show();
},
// other settings/options here
});
Here is a fiddle similar to the above. I added the .clone() part because, when I was implementing something similar in a gallery, they disappeared after clicking once through all the images.
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.
I have the following structure of the Worklight application page:
<body>
<div with heading/>
<div with view/>
<div with Tab bar/>
<div with simple dialog/>
</body>
When I build the app for iPad and test it on it i have the following problem.
Dialog window puts gray unclickable layer on everything except the tab bar.
Why the tab bar stays available?
Is it a bug or I'm doing wrong?
Have you tried to put the heading, tab bar and dialog in the view?
Who invoke simpleDialog? try this
<body>
<div id="home" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<div with heading/>
<div with simple dialog
<button data-dojo-type='dojox.mobile.Button' onClick="openDialog()">
/>
<div with Tab bar/>
</div>
</body>
for invoke simple dialog, write
function openDialog(){
WL.SimpleDialog.show("text ", "text",[{text: "buttonName", handler: function() {WL.Logger.debug("dfsdfd"); }
}]
}
);
I tried put in views in a different variations, but it still didn't work.
Than while debugging I found out that the grey cover, which should cover everything in background has a
postion: absolute;
than I override this css class with
position: fixed;
and everything became great:)
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.