I've got the font-awesome-ie7.min.css in my html, however I'm unable to change the icon class dynamically using JavaScript/jQuery in IE7, works fine in other browsers.
<div id='iconDiv'>
<i class='icon-hand-down'></i>
</div>
<script>
$(document).ready(function() {
$('#iconDiv i').addClass('icon-hand-up');
});
</script>
Any help! appreciated.
Woohoo! I have a solution to this annoying issue. As with all coding that targets IE7 this is a complete hack but hey, it works...
<div id='iconDiv'>
<i class='icon-hand-down'></i>
<i class='icon-hand-up hide'></i><!-- initially hidden -->
</div>
<script>
$(document).ready(function() {
$('#iconDiv i.icon-hand-down').addClass('hide');
$('#iconDiv i.icon-hand-up').removeClass('hide');
});
</script>
Put both icons into your DOM and conditionally display whichever is relevant. You get the idea. I am using this same approach for toggles in my app.
Sample CSS from bootstrap:
.hide {
display: none;
}
.show {
display: block;
}
For reference, in my case I am using AngularJS:
<i data-ng-click="collapsed = !collapsed" class="icon-collapse ng-class:{'hide':collapsed}"></i>
<i data-ng-click="collapsed = !collapsed" class="icon-collapse-top ng-class:{'hide':!collapsed}"></i>
Related
I hope someone can help a numpty :)
I am using Boostrap 5 and this Lightbox library https://trvswgnr.github.io/bs5-lightbox/
It uses data-toggle="lightbox" to initiate it and is working perfectly.
<a href="http://fpoimg.com/200x200?text=Forth" data-toggle="lightbox" data-gallery="gallery" >
<img src="http://fpoimg.com/200x200?text=Forth"></a>
I would like to apply some css styling eg. lightbox background-color, padding etc but I have no idea where to start.
I used to use the ekko-lightbox for BS4 which had its own CSS but I can't find one for this.
As I can see, bs5-lightbox library doesn't have it's own stylings, and using BS5 markups and stylings.
So you can apply BS5 stylings and HTML you want.
You can start by browsing .lightbox-carousel (CSS class selector) on your page and create custom styling.
Based on this class you can customize it's child nodes.
img {
width: 200px;
}
/* this is how you can add stylings to wrapper, f.e. */
.lightbox-carousel.carousel {
padding: 1rem;
background: #ffffff7a;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="module">
import * as Lightbox from 'https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.8/dist/index.bundle.min.js';
document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show();
}));
</script>
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid my-lightbox-toggle">
</a>
Firstimer here. Sorry if myquestion is too stupid.
How can I change the label in :
<span class="fluid-thumbnail-grid-image-type">
XYZ
</span>
I want change XYZ to something else in a hosted application.
I have access only to add custom CSS to the head section.
Thanks in advance
Fernando
CSS/HTML Solution:
If you are able to edit the html, and want to use only CSS, you may use the :before (or :after) selector:
.fluid-thumbnail-grid-image-type:before{
content:"ZYX"
}
<span class="fluid-thumbnail-grid-image-type"></span>
Javascript Solution: If you are able to add javascript I would recommend jQuery .html() like so:
$('.fluid-thumbnail-grid-image-type').html('ZYX');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fluid-thumbnail-grid-image-type">XYZ</span>
Using only CSS Here's what you can do >>>DEMO Using CSS Pseudo-element :after and content
.fluid-thumbnail-grid-image-type {
visibility: hidden;
}
.fluid-thumbnail-grid-image-type:after {
content: 'ABC';
visibility: visible;
display: block;
}
<span class="fluid-thumbnail-grid-image-type">
XYZ
</span>
I'm trying to make a custom infowindow in CartoDB Editor. From the docs, it should be possible to use a <style> block to specify or override the default styles. But it seems like the whole block get's ignored. When I look at the Chrome Dev Tools, my styles are not present at all. They don't get overridden, they are just not there. Inline styles work fine, though.
The markup for the info window popup:
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h4 {
color: #fff;
}
div.cartodb-popup.v2.custom p {
color: #ff0;
}
</style>
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h4>{{boroname}}</h4>
<p>Borough code: {{borocode}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Any ideas what I could be doing wrong? I already tried it with and without the custom class, but I left it in there, because i thought some extra specifity won't do any harm. I'm pretty sure this <style> approach worked a year ago.
I could do most styling using inline styles, but that's very cumbersome and doesn't work for pseudo elements, like the small popup arrow.
Any way to do this on the web interface, or do we need to host this on our own servers to edit the .js scripts, etc?
This is my map: https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map
The example above is outdated and <style> blocks in the infowindow editor are not allowed any more. You can only use CSS inline styles in the CartoDB frontend editor. To get full control over the infowindow and the tooltip appearance, use cartoDB.js. In this example I'm changing the popup background color to grey:
<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h3,
div.cartodb-popup.v2.custom p {
color: #fff;
}
</style>
<section id="map"></section>
<script type="infowindow/html" id="template">
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h3>{{name}}</h3>
<p>{{description}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script type="text/javascript">
cartodb.createVis('map', 'https://your-accout.cartodb.com/api/v2/viz/477bdfc0-8210-11e5-936b-0e787de82d45/viz.json', {
tiles_loader: true,
center_lat: 48.6,
center_lon: 11.4,
zoom: 7
})
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(1);
// Select template from dom
subLayer.infowindow.set('template', $('#template').html());
});
</script>
Weirdly, I was able to get my infowindow to dynamically get taller without using any script tags. I set the width of the window using the web interface, and then added this to the infowindow custom HTML by clicking the button near the top.
{{mtrsrc}} is a column in my table.
Here's my code:
<div class="cartodb-popup v2 custom_infowindow">
x
<div class="cartodb-popup-content-wrapper">
<div class="row">
<div class="label"></div>
<div class="info">
<img height="300" src="http://pesticideresearch.com/fum/{{mtrsrc}}.png" />
</div>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
I found a difference of my website between Chrome (or IE) and Firefox.
Given a simple example,
<style>
.showDiv {
display: block;
}
.hideDiv {
display: none;
}
</style>
<script type="text/javascript">
function displayDiv() {
$('#div_1').removeClass("hideDiv");
$('#div_1').addClass("showDiv");
}
</script>
</head>
<body>
<ul>
<li id="div_0" onclick="displayDiv();">Div
<div id="div_1" class="hideDiv">
subDiv
</div>
</li>
</ul>
</body>
Clicking on div_0, it shows div_1. Then I click the link in div_1 to redirect to another page. If I go back to previous page, the CSS style of div_1 remains in Firefox but Chrome. Could anyone tell what is the reason for this? Also, how can I modify my code to unify the behavior of two browsers (e.g. let Chrome to keep the CSS style OR let Firefox to renew the CSS style for previous page)?
Here are the result of going back to previous page after redirecting to test2.html.
For Chrome
For FireFox
Try the following. Hide the subdiv once it is clicked
FIDDLE DEMO
HTML
<ul>
<li id="div_0" onclick="displayDiv()">Div
<div id="div_1" onclick="hideDiv()" class="hideDiv"> subDiv
</div>
</li>
</ul>
jQuery
function displayDiv() {
$('#div_1').removeClass("hideDiv");
$('#div_1').addClass("showDiv");
}
function hideDiv() {
$('#div_1').removeClass("showDiv");
$('#div_1').addClass("hideDiv");
}
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>