I've got a button with a search label. The idea is that when you click the button (and put it in the active state) my search field which is put on display:none becomes visible. My current setup doesn't seem to work however. I've created a jsfiddle containing my problem. Since this already is in ModX i cant paste the exact code but if clicking the button shows the text it yields the same result.
<div id="header">
<div class="search_function">[[$base.search-tpl]]</div>
<button class="search_button">Search</button>
#header label{
display:none;
}
#header input{
width:88%;
height:30px;
float:left;
margin:0px;
padding:0 0 0 10%;
text-align:center;
border-radius:0px;
}
#header button{
width:12%;
height:30px;
margin:0px;
padding:0px;
background-image:url('../images/transparent_search_icon30x30.png');
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:center;
}
.search_button:active > .search_function{
display:all;
}
.search_function{
display:none;
}
Ok, first include jQuery library in the <head> section of your document e.g.
Google CDN version
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
or download the compressed, production jQuery 1.11.0 and put it in your root folder then include it like this
<script src="jquery-1.11.0.min.js"></script>
then add below script just before the </body> tag
<script>
(function($) {
$('.search_button').click(function() {
if($('.search_function').css('display') === 'none') {
$('.search_function').slideToggle(350);
}
});
})(jQuery);
</script>
Here's a FIDDLE
Related
I am trying to convert an existing element in my HTML page to a link, the element has additional css functions to scale it when you hover your mouse over it.
<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
float:left;
padding:12px;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.lefthotbarbtn:hover{
float:left;
padding:12px 32px;
font-family:Verdana,sans-serif;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
.contactusbtn{
float:right;
padding:12px;
background-color:white;
border-radius:69px;
color:black;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.contactusbtn:hover{
float:right;
border-radius:0px;
padding:12px 24px;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
</style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
<div class="lefthotbarbtn">Who Are We?</div>
<div class="lefthotbarbtn">Products</div>
<div class="lefthotbarbtn">Help!</div>
<div class="contactusbtn">contact us</div>
</div>
</body>
</html>
I have tried various ways of converting each individual into a link without deleting existing information but whenever I did, the text would either disappear or move. What I want to be able to do is simply have the text as a link without changing the appearance of it and I can't figure out how.
Please mention the things you have tried in future.
I'll say a few things:
If all you want is to make them into link simply use the a link tag.
To me it seems like your building a header. Use nav with ul li with a. Keeps things clean and generally good practice.
If you want to go down this route you can can convert div to a and then use css to design the a however you like.
But If there is a problem with that try you can also do this (Not a good idea in general, why?):
<div class="lefthotbarbtn">Who Are We?</div>
Quick question:
Can I enable website preview on all of the links in my web page?
i.e. when the user moves the mouse over any link in the page, I want to show a simple popup window which loads the page in link.
If it's important, I'm using Asp.net
You can use an iframe tag to display another page.
<iframe src="http://www.example.com"></iframe>
Your HTML
<a class="tiptext">A link
<iframe class="description" src="http://www.example.com"></iframe>
</a>
Your CSS
.tiptext {
color:#069;
cursor:pointer;
}
.description {
display:none;
position:absolute;
border:1px solid #000;
width:400px;
height:400px;
}
Your JS
$(".tiptext").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});
JSFiddle: http://jsfiddle.net/yboss/q29tP/
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to expand 'select' option width after the user wants to select an option
I have a dropdown with reasonabily long text in it. it display fine in firefox but showing trimed text with respect to its size when i click on it in Internet explorer.
<select style="width:100px;" id="test">
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
</select>
when you open the page with above dropdown in firefox and click to view its values it will show complete description.
but in internet explorer, when clicked it only show 100px and rest of the text is trimed.
is there any way to view the complete text when clicked on dropdown in ie. as it shows in firefox?
This is a control render by browsers rendering engine & some CSS property may not work on it. In order to meet your goal try to make some customize controll like this
html markup:
<ul id="test">
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
</ul>
CSS:
#test li{
display:block;
background-color:#CCCCCC;
border:1px #FFF solid;
display:none;
width:auto;
cursor:pointer;
}
#test li:hover{
background-color:#999999;
}
jQuery:
$("#test li:first").css({'width':150+'px','display':'block', 'border':'1px #000 solid', 'overflow':'hidden', 'cursor':'pointer'});
$("#test li:first").toggle(function(){
$(this).siblings().css({'display':'list-item','width':'auto'});
},
function(){
$(this).siblings().css({'display':'none'});
}
This just a rough sketch of it.
Thanks for Jogendra for rough sketch.
here is complete working copy
<div class="ddcMain">
<div class="selection">Selection</div>
<input type="hidden" id="itemSelected" name="itemSelected" value="" />
<div class="ddListCon">
<ul id="ddList">
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971294</li>
<li>1239187239172391823kajsasdfaasdfas9817293971295</li>
</ul>
</div>
</div>
<style>
div.ddcMain{ position:relative;}
div.selection { width:150px; overflow:hidden; border:1px solid; padding:5px;}
div.ddListCon {position:absolute; top:33px; display:none; border:1px #000 solid; padding:5px;}
div.ddListDisplay {display:block;}
ul#ddList{ list-style:none; margin:0; padding:0;}
ul#ddList li:hover{
background-color:#999999;
}
ul#ddList li
{
display:list-item;
width:auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('div.selection').bind('click', function(){
$("div.ddListCon").toggleClass("ddListDisplay");
});
$('ul#ddList li').bind('click', function(){
$('div.selection').text($(this).text());
$('#itemSelected').val($.trim($(this).text()));
$("div.ddListCon").toggleClass("ddListDisplay");
});
});
</script>
I've been responding to old questions like this. It's a common problem. I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
It's a jquery plugin to make a styleable unordered list backed by the hidden select element.
The source is on github: https://github.com/tncbbthositg/GiantDropdown
You'd be able to handle behaviors and styles on the UL that you can't with the SELECT. Everything else should be the same because the select list is still there, it's just hidden but the UL will use it as a backing data store (if you will).
Can someone explain how to code the feedback button seen on foursquare.com? It's a vertical button on the side of the webpage and it opens a new window and dims out the background. I've seen this on some other sites as well. Thanks in advance.
How they did it...
The button is provided through the http://getsatisfaction.com service. This service is similar to other services like http://sharethis.com which exist to minimize the programming required to create a fully-rounded website. Essentially you setup an account (I'm assuming...) and they provide you with a javascript code-block that you include in your projects, which causes the vertical-button to appear on your site.
Do it yourself...
This wouldn't be that difficult the do yourself. I quickly worked up a jQuery example. Suppose we have the following markup:
<div id="feedback">
<p>Here is where you would have your form.</p>
<div class="toggler">?</div>
</div>
.toggler will be our button in this case. We'll want to place it outside of the feedback box with some css, and also place the feedback box with some css too:
#feedback { position:absolute; left:0; width:200px; padding:10px;
background:red; color:white; }
.toggler { width:25px; height:50%; color:white; background:blue;
text-align:center; position:absolute; top:25%;
right:-25px; cursor:pointer }
This could be cleaned up a bit. But now that we have our elements, we can add some toggle-logic with jQuery:
$(function(){
// When the user clicks on .toggler
$(".toggler").click(function(e){
// Get a reference to our feedback box
var feedback = $("#feedback");
// If it's in the process of being opened (or is opened)
if ( $(feedback).hasClass("opened") ) {
// Close it
$(feedback)
.removeClass("opened")
.animate({"left":0}, 1000);
} else {
// Else, Open it
$(feedback)
.addClass("opened")
.animate({"left":-$(feedback).outerWidth()}, 1000);
}
});
});
Online demo: http://jsbin.com/iyenu4
Have a look at jquery and the jquery UI javascript library for implementing those kinds of interavtive features.
Here is an example: http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/
Looks like they're using the Lift modal dialog for the popup and background dimming.
The button is probably positioned using CSS fixed positioning. Fixed positioning means that it remains in the same place on the screen, not on the page. This allows it to 'float" over the text even when you scroll.
The popup dialogue is the same. Clicking on the button toggles the display CSS property between none and something other than none, probably block.
The gray background, I'd guess is created with a big fixed position <div> with width:100% and height:100% and some opacity.
Try this:
HTML
Save this as example.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Example</title>
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>Example</h1>
<a id="clickhere">Click here for the popup!</a>
<div id="main">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<form id="popup" class="dialog" action="#">
<div id="popupbackground"></div>
<div class="dialog">
<h2>Popup!</h2>
<a id="closepopup">Click here to close this dialog</a>
</div>
</form>
</body>
</html>
CSS
Save this as example.css:
html {
height:100%;
}
body {
height:100%;
}
form.dialog {
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
text-align:center;
padding-top:10%;
display:none;
}
form.dialog div.dialog {
width:400px;
background-color:gray;
margin:auto;
text-align:left;
border:2px solid black;
padding:10px;
position:relative;
z-index:10;
}
form.dialog label {
display:block;
}
form.dialog input {
width:99%;
}
form.dialog textarea {
width:99%;
height:200px;
}
a {
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
#popup #popupbackground {
background:gray;
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
JavaScript
Save this as example.js:
window.onload = function() {
document.getElementById("clickhere").onclick = function() {
document.getElementById("popup").style.display = "block";
};
document.getElementById("closepopup").onclick = function() {
document.getElementById("popup").style.display = "none";
};
};
The idea is that the <form> consumes the whole screen, because of the width
and height properties in the form.dialog rule. Since that rule also specifies a fixed position, the user can never scroll away from the contents of this <form>. We can then center the <div class="dialog"> using a margin:auto, so it floats, centered on the page. The <div id="popupbackground"></div> provides a faded gray backdrop.