creating an expandable area in a web page - javascript

I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?

I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});

You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html

Related

Single page website with jQuery - Content in JS or HTML

I'm just picking up JS & jQuery and consider myself quite capable with HTML/CSS. I'm in the middle of building a single page front-end only website. I've got the layout nailed down with Bootstrap and now I'm just trying to figure out some of the functionality. My scenario is as follows:
There are 4 <div>s with text and an image in each of the 4 <div>s; and there is a <div> with class #content below it. There is a .on('click') listener for each of the #c1-4 divs and when the user clicks on a particular div, the #content div will change accordingly.
<div id="#c1" class="active-div">
<p>Text Here</p>
<img src="image.jpg">
</div>
<div id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
</div>
<div id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
</div>
<div id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
</div>
<div id="#content">
<!-- Content of the selected div goes here -->
</div>
By default, #c1 <div> is selected. The content that goes in to #content is mostly text but some icons and images too, with appropriate styling.
The Question: What is the best way to store & load content into the #content div? Based on my knowledge so far I believe the options are:
Hard-coding it into the JS and using .html() to set the content; although this would add quite a bit of HTML to the JS.
Hard-coding 4 different divs related to each of the 4 #c IDs and using .show() and .hide() accordingly.
Using .load() to load the content from another HTML document. However, I'm not sure how styling would be handled and how this will affect the display of the #content div.
I would also like to know the pros and cons of each of the above approaches and which one would be more suitable for future maintenance (e.g. adding a fifth, sixth #c numbered div to select & load content for).
In real world developers consider backend data to replace / append content based on user's clicks and it is just second thing how exactly you append / prepend / html or load your content to your div element. Not sure how you are going to hardcode different content according to the clicked button, I think in your case #2 & #3 should do the trick.
There is append / prepend actions you can use (they are self-explanatory I guess, but might be useful in some cases).
As I mentioned initially in ideal work you will do queries to your backend endpoints (databases, API etc..) and fetch content from there. Once done, you just style it accordingly using those divs and css (either inline or CSS table) things. Focus on overall construction!
There are a lot of ways to do this and a lot of JS frameworks out there that do it differently, but all of your options are appropriate in my opinion, especially given that you're using jQuery. I'll just talk a bit about your three options:
You can hard-code it into your JS, but you can also place the content in your HTML in a <script> tag and load it as a JavaScript string in jQuery, like they do for Underscore templates.
<script type="text/template" id="div-1">
<span>Hey, this is some content</span>
</script>
Then later in your JavaScript, just do $('#div-1').html() to get the contents of it, and you can stick that in your content div.
This option is also perfectly acceptable.
As long as you have all your css already applied to the document, dynamically changing the DOM won't affect its ability to apply styles. Just make sure you have all the rules in a stylesheet that is already loaded.
Expanding on my comment, here is how you could do it with hidden content divs and replacing html using .html()
$(function() {
var content = $('.active-div .content').html();
$('#content').html(content);
$('.item').click(function() {
$('.item').removeClass('active-div');
$(this).addClass('active-div');
content = $('.active-div .content').html();
$('#content').html(content);
});
});
.item {
cursor: pointer;
display:inline-block;
padding-right:10px;
}
.content {
display: none;
}
#content {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active-div" id="#c1">
<p>Text Here</p>
<img src="image.jpg">
<div class="content">Sample content 1</div>
</div>
<div class="item" id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
<div class="content">Sample content 2</div>
</div>
<div class="item" id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
<div class="content">Sample content 3</div>
</div>
<div class="item" id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
<div class="content">Sample content 4</div>
</div>
<div id="content">
<!-- Content of the selected div goes here -->
</div>

Uniform div height and button alignment

I have three divs that need to be the same height and have a button at the same level, but are containing varying amounts of text above and below the button.
Right now I'm just specifying heights to compensate for how long the text might be, but if it's not that long, there's too much padding, and it still might not be high enough.
This needs to work with IE9+, and the latest chrome and firefox. I'm starting to think the best solution is javascript unless there's a CSS miracle. display: flex looked promising, but don't think it'll work with IE9
See image below. The space between the titles and the buttons should be controlled by the longest title. Right now it's just a hard coded height. Similarly card heights should be controlled by the tallest card, but it's currently hard coded.
Here's a solution using display:table which should get you started:
HTML
<div id="wrapper"> <!-- Sets the size of the entire section -->
<div id="row1"> <!-- Becomes your table row -->
<div id="cell1"> <!-- Becomes the table cell -->
<p>Information</p>
</div>
<div id="cell2">
<p>A section of text</p>
</div>
<div id="cell3">
<p>Some text and other stuff - even divs.</p>
</div>
</div>
</div>
CSS
#wrapper {
height:100%;
width:100%;
}
#wrapper div {
border:1px solid black;
}
#row1 {
display:table; /* Creates the table */
}
#row1 > div {
display:table-cell;
width:30%; /* Sets the width of each table cell */
height:auto; /* Expands the height of the entire row as content is added */
}
Here's a CodePen demo with a mockup. The nice thing about this is that you can still use HTML5 and CSS3 for all of your content and styling.
Here's an example of how to handle it with a <table> instead of divs--that way no js is required:
Table Demo

how to divide a web page using divisions and how to give links between those parts of pages

I have a html page, having two div's.Left div contains all contents(INDEX of pages) with hyper-links.Now i want to display the content in the right div, that the user has clicked.In right div i have divided the page horizontally into 3 parts..10%,80%,10%.In that 80% horizontal div it shd display the content.I tried by using the target attribute in anchor tag, but it is not showing in that right div.How to solve this?
You can Try This:
css:
div {
width:90%;
height:800px;
position:relative;
background-color:blue;
}
a {
color:white;
font-size:24px;
}
html:
<div id="one">Top of Page</div>
<div id="two">Go to Top</div>
<div id="three">Go to Two</div>
You can try using Iframes. Can refer this site to get started: http://www.dtp-aus.com/frm_sets/frames.html

load data of hover image

First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>

javascript to overlay a modal popup that is center aligned

want to know Simply the javascript to overlay a div on centre of the page.
Just want to use plain java script to show and hide a div on the center of the page with "Please wait..." message and disable the background. Also this div shoud show on top of the other content of the page.
My div looks like this
<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div>
On click of a button , I want to show the div content center aligned on the page.
I do not want to use jquery,extjs,,etc to achieve this.
I have seen a few examples on the web with lot of other features added to a modal popup, just looking for something simple and clean.The bare minimum JS required to do this.
The div you want to display needs to have an ID:
<div id="loaderdiv">
Then in your javascript, you display this div with the following code:
document.getElementById("loaderdiv").style.display = '';
Thats the bare minimum you'll need.
Centering the image can be done using CSS:
<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px">
<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;">
example.com<br />
</div><!--overlay_msg-->
<div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()">
</div><!--my_overlay-->
<script type="text/javascript">
function showMyOverlay()
{
document.getElementById('my_overlay').style.visibility='visible';
document.getElementById('overlay_msg').style.visibility='visible';
}
function hideMyOverlay()
{
document.getElementById('my_overlay').style.visibility='hidden';
document.getElementById('overlay_msg').style.visibility='hidden';
}
</script>

Categories

Resources