I though I had this working and that I had done it right, but when I looked in IE and Chrome web browsers it was not perfect. This does however function correctly in Firefox. I am working at modifying a function that uses javascript to display a different .png file depending on which thumbnail is clicked. I modified it so that that instead of clicking thumbnails one would click links. The issue in the code is at the bottom in the H2 heading portion of the code. In IE and Chrome the text "choose" and the 2 links (Link_1 and Link_2) don't show up exactly next to each other, but instead the links show up a little higher. Also in Chrome and IE the links don't have that line underneath the link that we should see. I put this inside the heading H2 because it gave me control over the text style of the text "choose". Could someone please tell me the right way to put the text "choose" next to these links.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>clickLinks</title>
<style type="text/css">
H1 {line-height:0px;}
H1 {padding: 0cm 0cm 0cm .2cm; }
P {padding: 0cm 0cm 0cm 0cm;}
a {padding: 0cm 0cm 0cm .3cm;}
body { width: 920px; margin: auto; }
#imageWrap {
width: 930px;
height: 470px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<H2 style="font-family:Angency FB;color:#A8A8A8; font-size:14px">choose:
<a href="picture_1.png" class="thumbnail"><img
alt="Link_1"/></a>
<a href="picture_2.png" class="thumbnail"><img
alt="Link_2"/></a>
<div id="imageWrap">
<img src="picture_1.png" WIDTH="930" HEIGHT="470" alt="Main Image" id="mainImage"/></p>
</div> </H2>
</body>
</html>
Take a look at this FIDDLE. You had the h2 tag surrounding everything...which you shouldn't need to do.
<H2 style="font-family:Angency FB;color:#A8A8A8; font-size:14px">choose:</H2>
<a href="picture_1.png" class="thumbnail"><img
alt="Link_1"/></a>
<a href="picture_2.png" class="thumbnail"><img
alt="Link_2"/></a>
<div id="imageWrap">
<img src="picture_1.png" WIDTH="930" HEIGHT="470" alt="Main Image" id="mainImage"/>
</div>
Also, your css was pointing at an h1 tag, which didn't exist. I changed to to an h2 tag.
In the future, please be more clear with your questions. It was very confusing, however, I believe this answers your question.
Related
Completely new to HTML, I need an html file which does the above:
Some background color for the whole page.
In the center of the page, a block of text within a box of white background color.
Directly under (outside of) the white box, a small line of text at the center of page.
There is probably a better way to do it, but this is my way:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:color here;
}
#example-name {
background-color:white;
}
#example-2 {
text-align:center;
}
</style>
</head>
<body>
<div id='example-name' style="margin: 0 auto">
example content
</div>
<div id='example-2'>
<p>example text</p>
</div>
</body>
<html>
<html>
<body style="background-color:tan">
<p style="margin-left: 30%;margin-right: 30%; background-color: white; padding: 20px 20px 20px 20px;">
Hi.<br>
Thanks for using Mailgun! Please confirm your email address by clicking below!<br>
I hope this answers your question!
</p>
</body>
</html>
Use the css elements margin, background-color, and padding.
I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.
So, What basically I am trying is after clicking on <a> anchor tag I want to change the background of it.
Example : See image below
After clicking on this link I am generating (expanding) one div tag exactly below to it and displaying the polices on it.
I want to expand arrow turn when expanding/collapsing like :
See Image below: Image Name: (black_t_arrow.gif)
So that It will display image down arrow image when policies link is collapsed and again vice versa after clicking on Policies link it should hide that down arrow image with original one means it should return to the previous state.
Following is my CSS code:
.expended_div{ float:left; width:100%; padding:10px 0}
.expended_div a{ color:#000; font-size:11px; text-decoration:underline; margin-left:15px; font-weight: bold; background-image: url("/common/images/black_t_arrow.gif");
background-position: 0 2px;
background-repeat: no-repeat; padding-left: 9px;}
.expended_div a:hover{ text-decoration:underline}
.expand_collapse{ float:left; padding:10px 20px; }
Following is HTML code:
<p class="expended_div open">Policies</p>
<div class="expand_collapse" style="display:none;">
<p><?php
//some php code
}
?></p>
</div>
How can I achieve this using CSS?
Thanks in advance.
You need two CSS classes, one for the collapse and one for the expanded.
HTML:
<a id="expander" class="close" href="#">Click to collapse/expand</a>
CSS:
.close { background-image: url("/images/collapsed.gif"); }
.open { background-image: url("/images/expanded.gif"); }
JavaScript:
/* Useful for multiple CSS classes. */
$('a#expander').click(function(e){
e.preventDefault();
var exp = $(this);
if (exp.hasClass('open')) {
exp.removeClass('open').addClass('close');
} else {
exp.removeClass('close').addClass('open');
}
});
OR:
CSS:
a#expander { background-image: url("/images/collapsed.gif"); } /* set default image */
.open { background-images: url("/images/expanded.gif"); }
JavaScript:
/* Swap in/out the class open to override the default background. */
$('a#expander').toggleClass('open');
I assume you have a javascript onclick (or similar) to toggle the style for the menu item to expand it. If you have an ID on the menu items then in the JS that's triggered I would use a test for open/close status and over-ride or reset the CSS items as needed
document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";
This seems like a job for CSS sprites, as laid out here. My jsFiddle for the solution is here.
The basic idea is to create a single image that contains both arrows. Since you're using this image as a background, only the part of the image that fills up your <a> tag content will display. To change between one image and the other, all you need to do is change the css background-position property.
Inside your DOM-ready function:
$(".expended_div a").on("click", function() {
if(this.css("background-position") == "0px -8px")
this.css("background-position", "0px -31px");
else
this.css("background-position", "0px -8px");
});
For this to work, change "black_t_arrow.gif" to look like this:
The cool thing about this is that there's no loading time for the second image. It's already there, but hidden from view because the background image is larger than the content area.
I don't know about css but if you are using the jquery ui framework then following link will help you
http://jqueryui.com/accordion/
u will have to use following property
$( "#accordion" ).accordion({ collapsible: true });
try following Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true });
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Welcome</p>
</div>
<h3>Section 2</h3>
<div>
<p>Hi</p>
</div>
<h3>Section 3</h3>
<div>
<p>Hello</p>
</div>
<h3>Section 4</h3>
<div>
<p>How are you?</p>
<p>Have a nice day.</p>
</div>
</div>
</body>
</html>
Aslo check the documentation for the 'Accordian' at http://api.jqueryui.com/accordion/
On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>
I have very little javascript knowledge, so it seems a very basic question, but could not find a way to do that.
I have a 1024*768 fixed area like this:
alt text http://img260.imageshack.us/img260/4618/myimage.png
There will be a javascript button on the right side of the "Section A". When I click that button, Section A will be automatically resized and it will be something like this:
alt text http://img705.imageshack.us/img705/92/myimage1.png
So, Section A will overlap with Section B, and it will be same size with Section C (And i know the size of Section C). How can I automatically resize that area with overlap function? I am looking a plugin for Jquery, but could not find that. There is a resizable function in Jquery, but it does not help me. Could you help me out? (If you just give me a link that is related with this feature, that would be enough too)
edit: For extra note, Section A is a flash object, so it will enlarge and overlap with Section B when I click to that button.
Thanks,
The jQuery hide() effect would be useful here. If both Section A & Section B have a float: left Section A should expand to fill the area when Section B is hidden.
http://docs.jquery.com/Effects/hide
Have you tried the animate function?
http://docs.jquery.com/Effects/animate
Could have Section B hide with a slide or have Section A overlap it like you mentioned just need to set the positioning, z-index, etc. properly.
something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Terminal</title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#but').click(function (e) {
$('#a').removeClass('big').addClass('normal');
$('#b').hide();
e.preventDefault();
});
});
</script>
<style type="text/css">
.height {
height: 100px;
border: 1px solid black;
}
.big {
width: 198px;
float: left;
}
.small {
width: 100px;
float: left;
}
.normal {
width: 300px;
clear: both;
}
</style>
</head>
<body>
<div>button</div>
<div id="a" class="height big">a</div>
<div id="b" class="height small">b</div>
<div class="height normal">c</div>
</body>
</html>