I want the user to see that the text is clickable. As of now I have changed cursor to a pointer, and added an underline to the text on the <span> element, I have also tried different borders and highlights on text (basically changed colors), but I was unable to make that look good.
I am using panel panel-primary from bootstrap, and I know they have have a Tabs component also, but I can not use that due to other reasons.
Simple plunker
<div class="panel panel-primary" >
<div class="panel-heading"> SomeHeading <span style="text-decoration: underline; cursor: pointer" >Tab1</span> <span style="font-size: 8px;" class="badge">1</span> / <span style="text-decoration: underline; cursor: pointer">Tab2</span> <span style="font-size: 8px;" class="badge">3</span>
</div>
<div class="panel-body">
Some content here
</div>
What more can I do to make the user understand that these are actually tabs?
I want the user to see that the text is clickable. As of now I have
changed cursor to a pointer, and added an underline to the text on the
element.
These are both pretty standard conventions. Other visual cues (usually activated on :hover) might include:
bolding the text with font-weight:bold
changing the color of the text
changing the background-color of the text
changing the border of the text
You might even:
give the text a text-shadow
give the text's containing element a box-shadow
In addition to what Rounin said, you could also add a border:
border-style: groove; border-color: #3377ff;
See the new plunk.
EDIT: I realized he also mentioned borders.
Related
I would like to hide two buttons, which I have achieved using transparent.
I've also managed to hide them behind two hand written words in a picture, post and search. The problem is that when it comes to desktop, different screen sizes, mobile/tablet, different screen sizes/browsers, operating systems etc, the buttons don't match the text, being either too high or too low, depending on device etc.
It works if I set one place for mobile and one for desktop, but as soon as anything changes like screen size, the text and buttons mis-match so that the picture text becomes unclickable. It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.
Also tried to cut the buttons out of the image and use background: url but it didn't work and just cropped the image in the wrong place, hiding the word.
The only solution I can think of is if there is some way of telling the browser not to move the image regardless of screen size etc.
.btn.btn:hover {color: transparent! important; background:
transparent! important; border: none! important;}
btn.btn:active {color: transparent! important; background:
transparent! important; border: none! important; box-
shadow:none;}
.btn.btn {color: transparent! important; background:
transparent! important; border: none! important;}
Html
<div id="content" class="main-container">
<section class="content-area pt0 ">
<div id="main" class="" role="main">
<div id="shapely_home_parallax-3" class="widget
shapely_home_parallax"><section class="cover fullscreen
image-bg"><div class="parallax-window fullscreen" data-
parallax="scroll" data-image-src="https://adsler.co.uk
/wp-
content/uploads/2019/07/IMG_20190706_112754.jpg"
data-ios-fix="true" data-over-scroll-fix="true" data-android-
fix="true"><div class="align-transform"><div class="row">
<div class="top-parallax-section"><div class="col-md-8
col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<div class="mb32"></div><a class="btn btn-lg btn-white"
href="https://adsler.co.uk/wp-user-test-dashboard-2.
2/awpcp-place-ad/">Post</a><a class="btn btn-lg btn-
filled" href="https://adsler.co.uk/search.
adsler/">Search</a>
</div></div><!--end of row--></div>
</div></div></section><div class="clearfix"></div>
</div>
</div><!-- #main -->
</section><!-- section -->
Just so you can get more of a sense of what is meant, the page is: https://adsler.co.uk
You can try to play with display: none and display: block tag arguments for your divs. This probably will require using JavaScript to change the property your your buttons. Something along the lines of when the first button is clicked it's display style is changed to none, and when the second one is clicked the first one's style is changed to block. onclick = "myFunction();" should do the trick. https://www.w3schools.com/js/js_functions.asp for reference on JS functions
It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.
A much more effective way of achieving this effect will be to use an HTML image map. Using an image map will allow you to create arbitrarily shaped regions on an image that can be clicked like links.
I'm trying to create a highlight effect for a headline using css, see css-tricks article for background.
Here's a stackoverflow question that has solutions that work in the browser using box-shadow declaration, but email clients like Gmail don't support a lot of the newer CSS3 features.
Is there a workaround for doing CSS-based text highlighting that works and can be used in email templates?
When working with HTML email, you have to go really old-fashioned with your code. I don't think you can give a block of inline text a background color, but you can give a box like a table cell a background color fairly reliably.
The following text is highlighted: <table><tr><td bgcolor="eeff00">Highlighted Text</td></tr></table>
This probably won't even be highlighted in email clients: <span style="background-color: #eeff00">Highlighted Text</span>
An old trick could be using double texts (adjust the shadow color to fit your requirements).
Updated, with opacity, which might work and will give it even more "shadow-ish" look
<h1 style="text-align: center">
<span style="font-family: Verdana; position: relative">
<span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; ">
Service Request Created
</span>
<span style="position: relative">
Service Request Created
</span>
</span>
</h1>
<div style="height: 100px; border: solid; border-width: 2px; border-color: #000">
Box 1
<p>A</p>
</div>
I want to convert the div into a link. Note that div includes an anchor tag. What is the best way to do it.
Following code doesn't work. But that's the rough idea to my problem.
<a href="/x">
<div>
Box 1
<p>A
</p>
</div>
</a>
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).— W3C Documentation
The anchor element may not contain any interactive content. This includes other anchors. This is one of the more strict rules too. It not only goes against spec, but it completely breaks functionality in major browsers. Chrome alone parses your example to include four links!
You'll need a preprocessing language to alter the markup (server side language or javascript on the front end manipulating ajax return data), or you'll just have to manually change the HTML. Either way, in the end, you'll need to switch that inner anchor out with a span or some other non-interactive element.
I have found a useful jsfiddle for you that uses <a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'</a> for the actual <div>'s link, and then has independent links within this.
Click here to see the jsfiddle
You can simply add display: block; and use the height you need it will do the trick !
DEMO
or you can use inline javascript as that
<div style="height: 100px; border: solid; border-width: 2px; border-color: #000; cursor: pointer;" onclick="window.location='/a'">
Box 1
<p>A
</p>
</div>
The following code is worked for me. But I don't know it's a valid one even with HTML5.
<a style="display:block" href="/a">
<div style="border: solid; border-width: 1px; border-color: #FFF">
<div>
<h3>Heading</h3>
</div>
B
C
</div>
</a>
I have a part of a web page (incorporating Bootstrap CSS) that contains a <div> with the id "drop-zone" that I pick up later in javascript to implement drag-and-drop functionality:
<div id="drop_zone">
<p style="color: darkgray">Drop</p>
<p style="color: black">test.txt</p>
<p style="color: darkgray"> here</p>
</div>
I have the <p>s in there because I want to vary the styling across this single line, but if I use the code above, or if I swap the <p>s for <div>s, the code renders on multiple lines like so:
Drop
test.txt
here
when I really want it to look like:
Drop test.txt here
I'm sure this is an easy fix, but any thoughts here?
Use <span> instead of <p>.
<p> and <div> are both block elements which will be display their contents on a separate line by default. You'd be better off using a <span> which will display its contents inline.
<div id="drop_zone"><span style="color: darkgray">Drop</span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>
You should really consider moving all the styles into a stylesheet, too, instead of having them defined in style attributes like you have as this will make changing the styles easier as your page gets more complex.
try the below in your divs or p tags or better yet create a class that has this property :
display : inline;
or
display : inline-block;
<div id="drop_zone" style='display:inline;'><p style="color: darkgray; display:inline;"> Drop </p><p style="color: black; display:inline;"> test.txt </p><p style="color: darkgray; display:inline;'"> here</p></div>
This is the jsdfiddle
This is because <p> is a block-level element, so by default it will cause a line-break .. you can replace it with an inline element (<span>) or set the <p> display to either inline or inline-block
I think you can use <span> instead of <p>
<div id="drop_zone"><span style="color: darkgray">Drop </span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>
In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.
My first attempt gives the icon on it's own row.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" ></span>
Meeting
</div>
My second attempt gives the icon but not aligned properly.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
Adding the following style makes the text align with the icon:
.heading { vertical-align: top; }
http://jsfiddle.net/rypyP/1/
The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.
<div class="heading ui-state-active">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
http://jsfiddle.net/MEXQV/1/
Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?
If that is not possible, what way would you suggest and why?
SOLUTION
Stylesheet:
.heading
{
vertical-align: top;
}
Html:
<div class="heading">
<span class="ui-state-active" style="border: 0px">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
</span>
</span>
Meeting
</div>
http://jsfiddle.net/rypyP/4/
If you just want to get the icon of a particular ui-state, you can do this:
<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>
What it does is it will look the specified icon on jQuery's default theme icon set (it has four icon sets by default -- active, default, highlight, and error). If you want to remove the borders etc, you'll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }
Thanks.