i have a div and a link. so when i click the link it should Show me the div. but the Problem now is, i see the div only for a second and then the div hide again.
Why?
...
<div id = 'zuordnen'>
test
</div>
...
echo "<a href = '' ><img src = './images/zuordnen_menu.png' border=0 style =' width:1vw; height: 2vh;' onClick = 'showzuordnen();'></a> ";
JAVASCRIPT:
function showzuordnen()
{
document.getElementById("zuordnen").style.visibility = "visible";
}
CSS:
#zuordnen {
z-index: 1;
position: absolute;
width: 20px;
height: 6vh;
border: 1px solid #ff0000;
left: 20px;
visibility: hidden;
}
As j0869 pointed out the problem is the page is refreshed every time you click the image because the image is within an anchor tag.
To solve this just remove the anchor tag (<a>) that wraps your image.
Have a look at the code pen to see it working: http://codepen.io/HywelMartin/pen/BjBxaj
If you really need the anchor tag just change the href='' to href='#'.
Related
I have the code below to open a product label in a lightbox when it is clicked. When it is viewed on a mobile device it displays the same image but on click it opens the label in a new tab. (lightbox is responsive so the image is too small on mobile).
For some reason though when on mobile view, the tag takes up the entire width so that if you click to the right of it, it will open the image in a new tab. I don't understand why this is since I am setting it's width to 100px.
<style>
#lightbox {
position: fixed;
/* keeps the lightbox window in the current viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
/*use below to make a 1px black image with 75% opacity for the dark background instead of above. above has issues in IE*/
/*background:url(overlay.png) repeat; */
text-align: center;
z-index: 99999;
}
#lightbox p {
text-align: center;
color: #fff;
margin-right: 20px;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
z-index: 99999;
}
#lightbox img {
box-shadow: 0 0 25px #111;
-webkit-box-shadow: 0 0 25px #111;
-moz-box-shadow: 0 0 25px #111;
width:80%;
max-width: 940px;
max-height: 800px;
z-index: 99999;
}
.mobile_label_view{
display:none;
}
#media only screen and (max-width: 950px) {
.lightbox_trigger{
display:none;
}
.mobile_label_view{
display:block;
}
}
.lightbox_trigger{
margin-top:15px;
cursor: pointer;
}
.mobile_label_view{
margin-top:15px;
cursor: pointer;
}
a.label_container{
max-width:100px !important;
width:100px !important;
}
</style>
<div id="wrapper">
<!--have view label text-->
<!--<a href="/image.png" class="lightbox_trigger">-->
<!-- View Label-->
<!-- </a>-->
<!-- <a href="/image.png" target="_blank" class="mobile_label_view">-->
<!-- View Label-->
<!-- </a>-->
<img src="/image.png" width="100px" class="lightbox_trigger">
<img src="/image.png" width="100px" class="mobile_label_view">
</div>
<!-- #/wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
//var image_href = $(this).attr("href");
//Get clicked link src
var image_href = $(this).attr("src");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').show();
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p onclick=\'hideLightbox()\'>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href + '" />' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});
});
function hideLightbox() {
$('#lightbox').hide();
}
</script>
You have:
#media only screen and (max-width: 950px) {
.lightbox_trigger{
display:none;
}
.mobile_label_view{
display:block;
}
}
Change .mobile_label_view from display:block to display:inline.
A block element, such as a div, takes up the full width available, whereas an inline element, such as a span, takes up only as much width as it needs.
Here's a jsfiddle linking to a cat pic as an example: http://jsfiddle.net/ethanryan/mg1vjeo2/
I'm using Google Map Javascript Api to put a map on my website.
I created a button on the top right corner of the map just so the user could close it
This is my CSS button code:
#close-map {
position: absolute;
top: 0;
right: 0;
background: #ffc300;
color: #000;
font-size: 16px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
z-index: 400;
}
I used jQuery to put it inside the #map div
$(window).load(function() {
$('#map').prepend('<div id="close-map">close map</div>');
});
and I have jQuery code to hide the map when I'm clicking on it
So I can see the button on the corner but it's not clickable
you need to put that clickable button out of the #map div. for that you can wrap it on another div (testing-div) and put button into it.
<div class="testing-div" style="position:relative;">
<div id="close-map">close map</div>
<div id="map" style="height: 580px"></div>
</div>
now you can add some jquery to close the testing-div
$("#close-map").click(function(){
$(".testing-div").slideUp();
});
I am working on a webpage using jQuery Mobile, iScrollview, and Google Maps. When the map gets initialized, it will load a set of markers with infowindows containing an image. When the image gets clicked, it will load the content of a jQM popup with a list and show the popup.
I am having 2 problems:
1) How can I set a height (e.g. 150px) for my jQM popup's content? Using iScrollview, the content's height becomes overridden and becomes large. Using the refresh() as specified in the documentation has no effect (or am I using it wrong?).
2) Is there a way for me to show a scrollbar only if the list exceeds the height of the content? Currently, it always shows a scrollbar.
HTML
<div style="display: none;">
<div class="popup">
<div class="header" data-role="header">
<h1>Products</h1>
</div>
<div class="content" data-role="content" data-iscroll>
</div>
<div class="footer" data-role="footer">
<a class="close" href="#" data-rel="back" data-role="button">Close</a>
</div>
</div>
</div>
CSS
.popup {
width: 175px;
}
.popup .content {
height: 150px; /* has no effect */
padding: 10px;
}
.popup .content ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.popup .content ul li {
height: 23px;
line-height: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
JavaScript
var markers = [];
function addMarker(i, retailer) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(retailer.lat, retailer.lng),
products: retailer.products // array of strings of unknown length
});
var infobox = new InfoBox({
boxClass: 'infobox',
closeBoxURL: '',
content: '\
<img class="detail" src="img/arrow_light.png" alt="" onclick="openPopup('+ parseInt(i) +');" />\
<div class="name"><span>' + retailer.name + '</span></div>\
<div class="address"><span>' + retailer.address + '</span></div>\
<div class="arrow"></div>',
maxWidth: 500,
pixelOffset: new google.maps.Size(0, -110)
});
markers.push(marker);
}
function openPopup(i) {
var items = [];
// create list
$.each(markers[i].products, function(i, name) {
items.push('<li>' + name + '</li>');
});
// set popup's content
$('.popup .content')
.empty()
.append('<ul class="list">' + items.join('') + '</ul>')
.iscrollview('refresh');
// show popup
$('.popup').popup({ history: false, transition: 'pop' }).popup('open');
}
Only thing you need to do is override popup content height and inforce it like this:
.ui-popup .ui-content {
height: 150px !important;
}
Remember to use !important if you want to override class css. !important is only needed when working with classes. For example if you initialize your css through id (#) !important is not needed.
Working example: http://jsfiddle.net/Gajotres/N28Vg/
I created a custom attribute with 10 options ( mix10, mix20 .... mix100). What I am trying to do is when I select mix10, to get "mix10" as a custom sticker on product thumbnail image. I have no clue how to add this custom attribute as a small CSS on the thumbnail image of products.
First of all your going to have to look at z-index the styling property and then you're going to need to get the attribute in relation to the image.
Create a simple div over your product image
<div id="mix-sticker" class="mix-sticker_<?php echo $_product->getAttributecode()?>">
<img YOUR PRODUCT IMAGE/>
</div>
Then for your CSS styling you'd need to do something similar to
#mix-sticker {
z-index:500;
width: 400px;
height: 400px;
}
.mix-sticker_1 {
background:url(../images/mix1.png) top left no-repeat;
}
Let's assume you want to put this sticker on the thumbnails in your category listing. Open up /app/design/frontend/[YOURPACKAGE]/[YOURTHEME]/template/catalog/product/list.phtml and find the section that outputs your thumbnail images. It will likely look something like:
<li>
<a>
<img />
<a>
...
</li>
What you will need to do is insert some code right inside the <a> link:
<?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
<div class="sticker">
<?php if($_product->getData('mix')=='mix10'){echo '<span class="mix10">'.$this->__('Mix10').'</span>'; }
elseif($_product->getData('mix')=='mix20'){echo '<span class="mix20">'.$this->__('Mix20').'</span>'; }
elseif ...
?>
</div>
Added all your options as elseif statements.
Then, in your CSS file, add styling for those stickers. That file will likely be located at /skin/frontend/[YOURPACKAGE]/[YOURTHEME]/css/styles.css:
.sticker {
position: absolute;
left: -5px;
top: -5px;
}
.sticker > span {
font-size: 0;
text-indent: -77777px;
width: 75px; /*image size*/
height: 75px; /*image size*/
background: url(../images/mix10.png) no-repeat left top; /*image location*/
display: block;
}
.sticker > span.mix20 {background: url(../images/mix20.png) no-repeat left top; margin: 1px 0 0 1px}
...
Add styles for all the sticker options you used in your PHTML file and then make sure your images are loaded to the server.
Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
And this (stripped down) HTML:
<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
<img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>
the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS display: block.
How can I center an image without using a parent div? I don't want the whole area clickable.
Background:
You can read this topic. It is about Wordpress and the built in editor. He automatically generates the class aligncenter on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.
in aligncenter class add text-align:center
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
I'm not familiar with wordpress, but you might want to try setting the image's and the anchors's css 'display' property to 'inline-block'.
If you are limited in changing the document's DOM, another option is adding an 'onClick' attribute to the image.
This will allow you to run some function once the image is clicked.
So, for example, if you want to redirect to another page:
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
And in the page's header:
<script type='text/JavaScript'>
var myRedirect = function(){
window.location.href = 'Some other location';
}
</script>
Notice the style='cursor:pointer', which changes the mouse's cursor to a 'hand' cursor.
To avoid an additional div container or even JavaScript, you can make the anchor display as a block:
.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<img src="logo.png" alt="Logo" />
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
<div class="megaman">
<img src="img/megaman.jpg" alt="megaman">
</div>
img {
height: 125px;
width: 200px;
}
.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn't figure it out without using a div.
The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image...
<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>
Second answer:
paste this in functions.php
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
// only do this on center
if($align == 'center') {
$html = str_replace('aligncenter', '', $html);
$html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
}
return $html;
}
Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.