Some text
.sliderPart {
width: 25%;
height: 100%;
}
.sliderPart a {
display:block;
position:relative;
text-decoration:none;
height: 100%;
font: 1.3em Arial, Sans-serif;
}
How can I make my link clickable for all div-area?
The easiest thing is to remove the div altogether:
<a href="#computers" class="sliderPart">
<strong>Some text</strong>
</a>
a.sliderPart {
...
}
Try this:
$(".trigger").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
..you'd also need to give cursor: pointer to the clickable element.
Put the link outside the div. You can make an anchor tag act similarly to a div. Like you're doing in the css you posted.
For dropdown lists, I use the following method a lot...
If you're not opposed to using scripts, you can make the div itself a proxy of sorts, so that if you click anywhere on the div, the first link within that div is subsequently clicked automatically.
$(".sliderPart").bind("click", function(){
$("a:first", this).trigger("click");
});
Of course you would want to update your styles for the div when you mouse over it to indicate the entire thing is clickable.
Related
I'm building some sort of framework where the content of the page can be edited with ContentTools. A requirement of ContentTools is that the regions must be parents.
If you try this:
<h1 data-editable data-name="heading">Content</h1>
It wont work as a region has to contain editable block level elements. A way around this is to wrap the tag like so:
<div data-editable data-name="heading">
<h1>Content</h1>
</div>
But I just want to make the text editable, so I automatically wrapped the inner elements in a div. This works but it affects the styles.
Is there a way to make a div 'transparent', so it will inherit all styles?
I tried the following code.
To be clear: In this example I don't write the h1 css, so i have no influence over which styles are used.
$("[data-editable]").wrapInner("<div class='innerWrap'></div>");
/* example h1 css, could be anything */
body > h1{
font-size: 40px;
color: red;
font-family: sans-serif;
border: 3px solid green;
background-color: blue;
padding: 5px;
}
.innerWrap{
all: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-editable data-name="heading">Content</h1>
As you can see some things work. But things like a border will double.
It has to be no difference with or without the innerWrap.
Is it possible to do this with css? It has to work on every css property.
I think you need to wrap the h1 with a div not div with h1.
for eg. .wrapInner() will produce something like
<h1 data-editable="" data-name="heading">
<div class="innerWrap">Content</div>
</h1>
But what you want is
<div data-editable data-name="heading">
<h1>Content</h1>
</div>
So please try with .wrap() instead of .wrapInner()
$("[data-editable]").wrap("<div class='innerWrap'></div>");
h1{
font-size: 40px;
color: red;
font-family: sans-serif;
border: 3px solid green;
background-color: blue;
padding: 5px;
}
.innerWrap{
all: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-editable data-name="heading">Content</h1>
.innerWrap{
all: inherit; /* remove it*/
}
As a default behaviour, if you not specify css props for ".innerWrap" it will look same as parent only
The ability to make an individual element editable standalone as opposed to as part of a collection (e.g in a region) is currently being worked on: https://github.com/GetmeUK/ContentTools/issues/79
There is however a short-term imperfect approach you could try, first change you're HTML as follows:
<h1 data-editable data-name="heading">
<span data-inline data-ce-tag="h1">Content</span>
</h1>
This will make the h1 tag the region and tell ContentTools/Edit to treat the inner span element as a h1 (text) element (thanks to the data-ce-tag).
But the next problem is that if the user hit's return you'll end up with a new paragraph tag inside of your h1 - which we don't want. This is where the data-inline attribute comes in, we need to listen for mount events and if the element mounted has the data-inline attribute we'll modify its behaviour so it can't do certain things which might produce undesirable events:
ContentEdit.Root.get().bind('mount', function(elem) {
// We're only interested in elements that are marked as inline
if (elem.attr('data-inline') === undefined) {
return;
}
// Change the default behaviour of the element
elem.can('drag', false);
elem.can('drop', false);
elem.can('remove', false);
elem.can('spawn', false);
});
You can find out more about modifying behaviours here, along with their current limitations here.
Very new to HTML and CSS. I've finally figured out how to hover a div and cause that to show text in another div. But what then happens is when I hover the div where the text appears that too shows the text; which I don't not want.
<div class="leaf5">
<img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
<div class="cashdup-info">
<h3 class="cashdup-text"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>
</div>
Is there a way to hover the div called "leaf5" and have that show text in another div without the text showing up if I hover the actual div the text is contained in. My CSS is as follows:
.cashdup-text {
font-weight: 100;
font-size: 22px;
display: none;
}
.leaf5:hover .cashdup-text {
display: block;
}
Thanks.
.leaf5:hover .cashdup-text:hover {
visibility: hidden;
}
I wouldn't use display: none here, because an element that has display: none logically can't be in a hover state.
use this way :
Demo
Demo for singlle image only
CSS
div {
display: none;
}
img:hover + div {
display: block;
}
HTML
<img src="image/imh.pmg">
<div>Stuff shown on hover</div>
The issue you are facing is when you apply hover to your leaf5 div it displays the cashdup-text which then increases the area of leaf5 including the text part. That is why when you have text displayed you can't make it disappear. Because you are already hovering it.
You can try absolute position like this way:
CSS:
.cashdup-text {
font-weight: 100;
font-size: 22px;
}
.cashdup-text{
position: absolute;
display: none;
}
.leaf5:hover .cashdup-text {
display: block;
}
Fiddle: https://jsfiddle.net/dqz9j2tj/
The problem is, .cashdup-text is a child of .leaf5 so when you're hovering over .cashdup-text, the browser sees it that you're also hovering over .leaf5 (in a way).
Are you open to using JS? If so, please see below.
var showme = document.getElementById("showme");
showme.style.display = "none";
function display() {
showme.style.display = "block";
}
function hide() {
showme.style.display = "none";
}
<div class="leaf5" onMouseOver="display();" onMouseOut="hide();">
<img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
</div>
<div class="cashdup-info">
<h3 class="cashdup-text" id="showme"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>
As you can see, I've added an id of "showme" to the h3 element you want to show / hide and have added MouseOver / MouseOut events to the .leaf5 div. I've also separated .leaf5 from the div below, just so it doesn't cause any issues like you described when hovering over .cashdup-text.
Try adding this to your stylesheet:
.leaf5:hover .cashdup-text {
opacity:0;
}
.cashdup-text {
opacity:1;
}
I got a button which is inside a div, but I need to get that div on top of this button, in order to be able to use onMouseOut event.
I tried to change z-indexes of those two, though that didn't helped. Any ideas? I can include code for better understanding but I think it's not necessary.
Impossible. Children will always appear above their parent.
You need to seek another approach; disabled elements do not appear to have events. I'd reconsider the UI to circumvent this issue. If you absolutely must have this functionality, perhaps replace the disabled button with another HTML element that can accept mouse over events.
http://jsfiddle.net/4HU72/
HTML
<button>Active Button</button>
<div>Disabled Button</div>
Disable button
<span></span>
CSS
button, div {
width: 200px;
height: 200px;
display: block;
background-color: #336699;
}
div {
display: none;
}
Javascript
$("a").click(function() {
$("button").hide();
$("div").show();
});
$("button, div").mousemove(function(e) {
$("span").html(e.pageX+"|"+e.pageY);
});
I would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery
I want to use pretty 3d button images on my website. However, currently the way this works is the text is part of the image.
So, when I want to change the text (or make a new button) it's a 10 minute editing chore instead of a 20 second text change.
I've seen a few websites that have a blank button with text on it.
The real trick is making the entire image clickable. I've been able to make the link inside an image visible but that's a poor UI. Users will expect to click the button anywhere and failure to behave that way will frustrate them.
It seems like they're wrapping a .DIV tag with an image background around a Hyperlink.
<Div (class w/ image>
<a> text
</a>
EXAMPLE:
https://www.box.net/signup/g
Anyone have any insight or explanation of how this works?'
CODE SAMPLE
<a href="#" class="button" style="position: relative;left:-5px;"
onmousedown="return false;"
onclick="document.forms['register_form'].submit(); return false;">
<span>
My text
</span>
</a>
Make the button a background image:
<style>
div.button a {
display: block;
width: /* image width */;
line-height: /* image height */;
text-align: center;
background: url(/* image uri */) no-repeat;
}
</style>
Would setting your anchor to display:block and giving it a height/width equal to your div/background image help you?
perhaps something like
a {
width: something ;
height: something;
display: block;
background: url('hi.png');
}
also,
input { background: url('hi.png'); }
is an alternative
Your example is just placing CSS styles on the a tag...
From there:
The tag:
<a onclick="document.forms['register_form'].submit(); return false;"
onmousedown="return false;" style="position: relative; left: -5px;"
class="button" href="#">
<span>Continue</span>
</a>
Note that they are using JS for some reason, and not using the href, I don't like that.
Then, the button class:
a.button
{
background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top;
font-size:16px;
height:42px;
line-height:42px;
width:155px;
}
This is just how that site you linked to did it.
I found this rather impressing. Using GWT to style hyperlinks.