I have an anchor and a H1 with a span. When I click the span I show an alert, but the link is also opened and I don't want this happens, I only want to show the alert. Is there any way to do this with CSS (I can't not use jQuery for that)? Maybe z-index?. This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("span").click(function() {
alert("The span was clicked");
});
</script>
</body>
</html>
Here the fiddle: https://jsfiddle.net/b820m6uj/
IF you can't use jQuery, you can use vanilla javascript:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
document.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
alert("The span was clicked");
});
});
</script>
</body>
</html>
If you are already using jQuery change the span selector to a pass the event object and add event.preventDefault() within your block. See Demo 1.
Here's a way to use CSS but you need to change 2 things in HTML.
Ad an id to your <span> or <h1> (ex. <span id='tgt'>...`)
Next, change <a>nchor target to the id of the <span> (ex. <a href="whatever.com" target='tgt'>...`)
Last but not least, add this ruleset to your CSS:
#tgt:target {display:inline}
The pseudoclass is :target which when applied, as demonstrated above, will enable whatever ruleset on the selector it's assigned to when an <a>nchor is clicked (with all the preparations previously explained of course.) I assigned display:inline because span#tgt already is inline making the <a>nchor truly disabled and almost completely worthless yet clickable. See Demo 2. BTW added a second example in Demo 2 with JavaScript and it still functions fine.
Demo 1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("a").click(function(event) {
event.preventDefault();
alert("The span was clicked");
});
</script>
</body>
</html>
Demo 2
document.getElementById('tgt2').addEventListener('click', function(e) {
/* Once again this would be the best solution */
// e.preventDefault()
alert("Hey JavaScript/jQuery works still!")
}, false);
#tgt1:target {
display: inline
}
#tgt2:target {
display: inline
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="tgt1">
<h1 id='tgt1'>Title <span>:target with CSS only</span></h1>
</a>
<hr/>
<a href="https://stackoverflow.com/" target="tgt2">
<h1 id='tgt2'>Title <span>:target with JS alert()</span></h1>
</a>
</body>
</html>
You can attach a click handler to the a then test the e.target and see if it was the span, and if so, show the alert and use e.preventDefault() to disable the link.
$("a").on('click', function(e) {
span = $(this).find('h1 span')[0];
if (e.target == span) {
e.preventDefault();
alert("The span was clicked.");
}
});
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/">
<h1>Title <span>Some text</span></h1>
</a>
Related
The top part of my checkbox do not word anymore after resizing it and resetting materialize.
Here is sample code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
</head>
<body>
<form action="">
<label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
Here is the jsfiddle for you to try to click the top part of the checkbox if you want:
https://jsfiddle.net/j4oxgmtc/
Any idea or solution?
Thank you!
Andreas responded to that question in a comment: Exclude materialize css for some specific checkbox
''This happens, because is an inline element. You can set display: inline-block for it to fix it.''
Here is the modified working code: https://jsfiddle.net/vL3fsqjb/2/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
How can I make a scrollbar for my page that appears when I place my cursor at the corner ?
I found out a way to make the scrollbar appear and disappear on hover by using the following:
div { overflow:hidden;height:whatever px; }
div:hover { overflow-y:scroll; }
But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.
Please suggest me a way to do so.
what i have understood is that you want something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Liveweave</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.right').hover(function(){
$('.box').css('overflow-y','scroll');
},function(){
$('.box').css('overflow','hidden');
});
});
</script>
<style type="text/css">
.box
{
overflow:hidden;
width: 100px;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.box:hover
{
/*overflow-y:scroll;*/
}
.body{width:100%}
.right{float:right;min-height:50px;position:absolute;right:0}
</style>
</head>
<body>
<div class="body">
<div class="right">
right edge
</div>
<div class="box">asdfsadfsdafsdafsdaf,
sdfsdfsdfsdfsdfsd
sadfsd
sdf
sadf
sdf
dsf
sdfdsfsdfsdfsdfsdfsdaf
sdffsdf</div>
</body>
</html>
I have a HTML of
<span> Day Month </span>
and for CSS I want to target Day seperately and Month seperately (apply different styles to them) without changing the HTML.
How can I do it?
Yeah its possible. You can follow this method.
Here font-word is not posible, that have no option in css. But we use content css property
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: orange;
}
span:before
{
color: red;
content: "Day";
position: absolute;
}
</style>
</head>
<body>
<span>Day Month </span>
</body>
</html>
Updated: Here the fiddle Demo
I am trying to use the jquery-mobile spinner but it doesn't seem to work
From the official docs ( http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html ), i tryied running this in the chrome console and it works
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<i class='icon-spinner icon-4x'></i>"
});
but if i try running this, from application.html.haml or console, doesn't seem to work
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});
it displayes a shadow instead of my spinner :-? .
What am i missing here?
Thanks :)
Solution:
Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.
First of all, we need to override default ui-loader-default class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.
.ui-loader-default {
opacity: 1 !important;
}
And this is our spinner. Because you are using custom i tag we need to use display: block, without it spinner will be hidden.
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
Here's a working example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>