I'm creating a floating sidebar which will display Facebook logo and open a div on click. This div will contain a Facebook like box. When the user clicks the logo again, the div closes.
I managed to get it working, but I need to replace the button with an image (Facebook logo, like I said) and still have the functionality of this script.
How could I achieve this?
Fiddle here: http://jsfiddle.net/h8CNP
Your Javascript is set to toggle based on the click of the id so all you would need to do is replace this:
<button id="show1" data-href="curtir">Click ME!</button>
With this:
<img id="show1" src="whatever.jpg" data-href="curtir" />
Here is a fiddle of it in action: http://jsfiddle.net/LrTqG/
you can apply an image on button using below css code.
button {
border: none;
background: url("http://lorempixel.com/100/50") 0 0;
width: 100px;
height:50px;
}
Here is a Demo
you can do this in several ways, one is to put background image to button like this:
<button id="show1" data-href="curtir" style="width:100px; height:100px; background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png); background-size: 100% 100%;"></button>
or use img element instead of button
or use div with background image that reacts on click... (my favorite because it can be transparent, no borders etc...)
of course, for img and div you would want to change cursor to pointer
style="cursor: pointer;"
Just modify the button to remove the inner text <button id="show1" data-href="curtir"></button> and add something like the following CSS code
#show1 {
background: url('http://placehold.it/100x50') no-repeat;
width: 100px;
height: 50px;
}
You can add borders for hover too!
#show1:hover {
border: 2px solid cyan;
}
And for some effect of pushing the button down:
#show1:active {
background-position: 1px 1px;
}
Updated JSFiddle
how about making using of the "image" input type?
<input type="image" src="http://epicshowdowns.com/wp-content/uploads/2013/12/facebook-icon.png" id="show1" data-href="curtir" value="Click ME!" />
<div id="curtir" class="demo">Lorem ipsum.</div>
http://jsfiddle.net/h8CNP/11/
Related
I have a button inside a div, the button is positioned on the left with display flex
I have another div below that that also contains a button.
I have positioned the bottom div on top of the top div by giving the bottom div a negative top margin.
The button in the bottom div is still clickable but now the button in the top div is not clickable because the bottom div is covering it.
Is it possible to have BOTH buttons clickable in this situation.
I know I can use pointer-events: none; on the top div but I want both clickable
I know I can rearrange the layout but is it it possible like this.
.wrap {
max-width: 800px;
border: 1px solid grey;
}
.top-button button {
display: flex;
margin-left: auto;
}
.bottom {
border: 1px solid red;
margin-top: -40px;
}
button {
cursor: pointer;
padding: 10px 15px;
}
<div class="wrap">
<div class="top-button">
<button class="btn">x</button>
</div>
<div class="bottom">
<button class="btn">Click</button>
</div>
</div>
The only way I know of to do this would be to manually catch the click-events on your top-button div and then somehow invoke the click handlers of underlying elements. You could use Event.preventDefault() to prevent the event from bubbling up the DOM and then use Document.elementsFromPoint() to see if you hit your button and if so, invoke its click handler.
This is more of a how to question from a beginner. I'm building a HTML5 Page. I have a picture that I want to have three mouseover events. On 1/3 of the image, I want to mouseover with a Yellow Rectangle which will populate information to the right, if you click I need it to be a link. The 2nd (2/3) of the image will be a red mouseover rectangle doing the same thing. The 3rd (3/3) of the image will be a green mouseover rectangle doing the same thing -populate information on the right, and if you click links to another webpage.
I have no clue how to build a shape over just a portion of the image so I can mouseover. I'd like to do this in a CSS with a.hover, but I don't know if I can.
Please Help.
Heather
What you do is have a div with your image set as its background then inside the div you place 3 anchors with a width of 33% and different colors on hover. See my example below.
div.picture {
width: 300px;
height: 300px;
background-color: cyan;
background-image: url(/images/picture.png)
background-size: 100% 100%
background-repeat: no-repeat;
border: 1px solid black;
}
div.picture a {
display: inline-block;
width: 33%;
height: 100%;
}
a.yellow:hover {
background-color: yellow;
}
a.red:hover {
background-color: red;
}
a.green:hover {
background-color:green;
}
<div class="picture">
<a class="yellow" href="/link1.html" />
<a class="red" href="/link2.html" />
<a class="green" href="/link3.html" />
</div>
I was trying to insert a image inside a textarea but that seems to be impossible other than using contenteditable ="true" attribute of textarea. Meanwhile, I check diaspora site and I found that it can be possible. I ain't sure how that has been done. Is that really a textarea or some css trick via using div ? How can I implement the same?
Below image is a representation of that functionality:
For things like this you are better off swapping out a textarea with an element to show a more complex display, using .click() and .blur() events. Here is an example that you can play around with.
HTML:
<div class="container">
<textarea class="text-area hidden"></textarea>
<div class="text-area icon-example"></div>
</div>
CSS:
.container {
position: relative;
display:inline-block;
}
.text-area {
width: 200px;
height: 50px;
border:1px solid #ccc;
display:inline-block;
}
.icon-example:after {
content: url(http://www.stat.ncsu.edu/dept-icons/camera-icon.gif);
position:absolute;
z-index:9999;
right: 3px;
bottom: 6px;
}
.hidden {
display:none;
}
JQuery:
$('.text-area').click(function() {
$(this).hide();
$(this).parent().find('textarea').show();
});
$('textarea').blur(function() {
$(this).parent().find('div').text($(this).val()).show();
$(this).hide();
});
You could take my example much further, playing around with CSS of the div and textarea so that their appearance eventually matches each other. I have done this before and it can be made to be cross-browser compatible.
You have to use div that covers over the text area so that you can select image and submit form as multipart.
Its totally game of CSS.
You can use absolute div to position the button or image, all you need to do is to calculate the position w.r.t. the text area.
Check out this, the similar post at link
I have an input field that looks like this:
<input type="submit" value="CONTINUE" name="submit" class="submitButton">
There is a background image on the input that gives it a texture already, so I want to add another background image without overriding the original one.
I have a png of an arrow that needs to display after "CONTINUE" and have tried a few methods to get it on the page including adding an after property in the CSS:
input.submitButton:after{.....}
as well as trying to put a div inside the value (worth a try) and I can't get it to show.
Is there any way to do this without using absolute positioning?
just use the <button> tag
Fiddled here
HTML :
<button type="submit" name="submit" class="submitButton">
Text inside button <span class="spanner">→</span>
</button>
CSS :
.spanner {
background-color:red;
border-left:4px solid green;
}
You may have to set a background with arrow + continue
input.submitButton{
/*background-color: transparent;*/
background-image: url(arrow.png);
background-position: 50% 100%;
/*border: none;
width: ;
height: ;*/
display: inline-block;
padding-right: ;
}
or you can use a position:absolute element with an arrow.
That should do a trick:
input.submitButton{
background: url(arrow.png) 50% 100%;
}
I am trying to line up an icon with a DIV. I have the following code. This code makes the icon appear to the right of the input which is what I want. But it is just too high. I need to shift the icon down.
<div>
<input name="Password" type="password">
<span style="display: inline-block; margin-top: 9px;" class="ui-icon"></span>
</div>
The ui-icon css looks like this:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
I tried with margin-top but it doesn't work. What I just need is some way to make the icon go down about 5 pixels. Is there something I am missing?
background-position:right center;
remove margin-top: 9px;
You may do it with CSS like this: (use img instead of background span)
vertical-align:middle;
or another way could be to set
position:relative;
float:left;
top:10px;
you may adjust top accordingly.
You want to use the CSS background-position property, you can specify co-ordinates. See:
http://www.w3schools.com/cssref/pr_background-position.asp