i've a clickable heart icon and i've a number at his right. I want the number to change everytime i click the heart. Do you know how can i achieve that? i'm messing around with PHP and CSS. The codes are these ones:
<span class="like-post" title="Like">
<span class="icon"> </span>
<span class="number"> 0 </span>
</span>
and the style.css
.like-post {
font-size: 11px;
font-weight: bold;
color: #555;
display: inline-block;
cursor: pointer;
width: 28px;
height: 15px;
margin-left:3px;
}
.icon {
display: block;
width: 15px;
height: 15px;
position:relative;
top: 3px;
left:1px;
background: url('images/heart15.png');
}
.number {
display: BLOCK;
float: right;
position: relative;
top: -14px;
}
thanks!
You could write some jQuery to send an AJAX request to your PHP script on a .click() event and use .text() to change the number with the result from AJAX.
Related
I have to following code:
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
https://jsfiddle.net/4uyb7rh9/10/
The problem is when you rollover the text, in firefox and ie overPlaylistItem & outPlaylistItem are constantly called and cursor just keeps flickering. This works properly in chrome. Is there a way to make this work in all browsers?
This happens because when you set the class having pointer-events: none it triggers a mouse leave event, hence it flashes.
First of all, may I suggest you use :hover, second, whether you use :hover or script, you need to target the specific element that shouldn't be clickable, for example the span
.playlist-non-selected:hover span {
pointer-events: none;
}
Stack snippet
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: inline-block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
}
.playlist-non-selected {
color: #bbb;
}
.playlist-non-selected:hover{
color: red;
}
.playlist-non-selected:hover span{
pointer-events: none;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
And here is an updated fiddle using your script
Update based on comment about not working in Edge
Appears to be some kind of bug in Edge when the span has display: block so changing it to display: inline-block and it works.
For it to work in IE11, the span need display: inline (or just remove the display:...) so it use its default.
Update 2 based on comment about not working in Edge
If you need the span to display as block, changing it to a div and it works in both Edge and IE11.
An updated fiddle using your script
Why haven't you used :hover ? This can be done with CSS easily and will not pose any difficulty for browsers compatability like
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
backface-visibility:hidden
}
.playlist-non-selected:hover{
color: red;
pointer-events: none;
backface-visibility:hidden
}
.playlist-non-selected {
color: #bbb;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
I have been 75% successful by looking at this post: How Do I Make a CSS Button Clickable
But still if the cursor comes in on the left the button is not clickable.
HTML
<span class="buy">Buy Tickets Now</span>
CSS
.buy {
float: left;
position: relative;
display: block;
width: 200px;
height: 27px;
text-align: center;
margin-left: -70px;
margin-top: 30px;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background-color: #39b54a;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
}
.buy:hover {
background-color: #8dc63f;
}
Could someone help with what I got wrong?
http://christianfordlive.com
The problem is generated by the div mainImage and the left margin. The div mainPage is in front of your button, that's why you can't click on it.
You have two easy options to fix the bug:
1 - Remove the margin-left of your button
margin-left: 0px;
If you do it, the div mainImage will stop overlapping your span.
You can also modify the z-index of your button to force it to go to the front of the mainImage div. For example, just add it to your .buy class:
z-index: 1000;
Both options should fix your problem
First of all, your code is kind of a mess, and you are overruling properties inside the same rule. All you need is:
html:
<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>
css:
.buy {
float: left;
position: relative;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 15px;
background-color: #39b54a;
padding: 15px 40px;
margin-top: 30px;
z-index: 100;
}
I have some unusual behaviour on my portfolio website in firefox. I am using twitter bootstrap.The text on buttons is going beyond the button width, also nothing happens on clicking the buttons. It works fine on chrome and safari.
Link: www.nakibmomin.com
html
<div class="parallax-overlay"></div>
<div class="jumbotron" id="home">
<div class="container">
<img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
<h1>Nakib Momin</h1>
<p>Student Blogger And Software Developer</p>
<button type="button" class="btn btn-primary">Contact Me</button>
</div>
</div>
css
.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
min-height: 460px;
}
.jumbotron {
background-image:url('../img/main.jpg');
height: 100%;
font-family: 'Hammersmith One', sans-serif;
text-transform: uppercase;
letter-spacing: 6px;
text-align: center;
min-height: 460px;
}
.jumbotron .container {
position: relative;
top:120px;
}
.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
position: relative;
z-index: 3;
}
.jumbotron img
{
margin-bottom: 5px;
padding: 2px;
}
.jumbotron button
{
margin-top: 18px;
width: 130px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
padding: 10px;
font-weight: bold;
}
.jumbotron p {
font-size: 12px;
color: #e3e3e3;
}
.jumbotron a {
font-size: 15px;
color:#fff;
text-decoration: none;
}
Don't put anchor tags inside of button tags.
Either make it an actual button and redirect users to your contact me page when they click it, or style the button using Bootstrap's button classes.
BOOTPLY
HTML:
Contact Me
You can't put <a>s inside <button>s. They don't work properly and it's very unclear what proper behavior for such a combination would even be.
I'm having the following code:
<a class="my-profile" href="link">
<div class="my-picture">[picture]</div>
<div class="my-fields">
<span class="my-name">[name]</span>
<span class="my-medal">[medal]</span>
</div>
</a>
It has the following theming:
.my-profile {
background-color: black;
color: white;
display: inline-block;
height: 35px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.my-picture {
display: inline-block;
padding-top: 5px;
height: 25px;
width: 25px;
}
.my-fields {
display: inline-block;
font-size: 13px;
padding-left: 5px;
padding-top: 8px;
vertical-align: top;
}
.my-medal {
padding-left: 5px;
height: 16px;
width: 16px;
}
I'd like to add some more top padding to the medal field, but when I add padding-top: 5px to the .my-medal class, the name field is moved too.
Why does this happen and how can I prevent it?
Simply set vertical alignment to the top on both the .my-name and .my-medal elements:
.my-name, .my-medal {
vertical-align: top;
}
JSFiddle demo.
(Note that to show this working I've had to also specify display: inline-block as you haven't provided any styling for those two elements in your question).
I need to put "..." in the front of text and show only last part of it, when it fills div.
And do nothing when it is normal
<span class="file-upload-status" style="max-width:200px">
C:\fakepath\996571_1398802860346752_2094565473_n.jpg
</span>
<br/>
<span class="file-upload-status" style="max-width:200px">
C:\fakepath\1.jpg
</span>
Here is what i have : http://jsfiddle.net/CBUH4/5/
Here is what i need :
Is it possible to do by Css, without using JavaScript or jQuery.
Maybe something like this: http://jsfiddle.net/CBUH4/8/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
This is the closest solution I could have got using just css. Still it has a drawback that we need to use multiple .'s which are approximately equal to the width of the span element.
Fiddle
HTML
<span class="file-upload-status ellipsis" style="max-width:200px">
C:\fakepath\996571_1398802860346752_2094565473_n.jpg
</span>
<br/>
<span class="file-upload-status" style="max-width:200px">
C:\fakepath\1.jpg
</span>
CSS
.file-upload-status {
font-weight: bold;
font-size: 16px;
color: #888;
background: #fff;
border-radius: 7px;
height: 27px;
border: 1px solid #ccc;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
overflow: hidden;
direction: rtl;
display:inline-block;
width: 200px;
position: relative;
}
.file-upload-status:after {
content:".................................";
color: white;
position: relative;
background-color: white;
z-index: 2;
}
.file-upload-status:before {
content:"...";
position:absolute;
background-color: white;
left: 0px;
top: 0px;
z-index: 1;
}
Suggestion: Give as much dots as possible :D