Single page website with jQuery - Content in JS or HTML - javascript

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>

Related

Can elements be styled with external CSS

An external CSS file is applied globally to the referencing HTML page. Is it possible to limit the scope.
I am aware that I can do .myCssClass etc but for this project, I'm going to need 2 very different styles in one page. Consider 2 divs, where one uses CSS stylesheet 1 and the other uses stylesheet 2 (and there will also be the orthodox CSS for the site).
The style sheets will also be used else where, so I can't edit the CSS. It would be idea to share the external CSS by element. Something like
<div stylesheet="../style.css">content 1</div>
<div stylesheet="../style2.css">content 2</div>
Is this possible?
You can use scoped attribute, but unfortunately it is supported only by Firefox. So, the ids and classes is the best, accepted, approved and common solution.
<div>
<style scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>Heading</h1>
<p>hello world! I'm of blue color!</p>
</div>
<p>I'm out of the scope, so I'm of the black color :(</p>
You must have then 2 different classes for them, one class from style.css and other from style2.css, as they'll overwrite one over the other if you only use the 'div' selector, if you can choose a specific class from each style.css, I think that would be wiser than complicating your life, or try the solution that Paweł posted
As far I know isn't possibile, but you can create "zones" using CSS selectors, in example, take a look here:
<div class="content">
<div class="myElement">
</div>
</div>
<div class="footer">
<div class="myElement"></div>
</div>
with this selector in css:
.content .myElement{
height:50px;
width:50px;
background-color:blue;
}
only the div with "myElement" class wrapped in the div with the "content" class will be affected by this rule.
here's a fiddle showing this case:
https://jsfiddle.net/fn7ohw75/

Replace div on hover (div rollover)

I have two div with different data. I want to replace div with other on hover.
I can do this in CSS but my data have images and links. so i use image in css i can not put
on for image.
also i have 4 different images in a dive.
so i want that when use hover that area my first div should be replaced with 2nd div.
Thank you
No example given so i'm assuming.
HTML
<div id="div1">Some data</div>
<div id="div2" style="display:none;">Some other data</div>
Javascript (with jQuery)
$("#div1").on('mouseover', function() {
$("#div2").show();
$(this).hide();
});
This is not tested so try it out an see if it does what you want.
If you don't want to use javacript you can do it like this.
You can change the content of the divs.
.child-one{
display : block;
}
.child-two{
display : none;
}
.parent:hover .child-one{
display : none
}
<div class="parent">
<div class="child-one">
text of child one
</div>
<div class="child-two">
text of child two
</div>
</div>

Comment out element when hidden

I want to use JavaScript to comment out a text within a div.
For example, I got <div> This is a text</div>. I want to use code so that unless this is visible, then it's commented out.
<!-- -->
I got 3 tabs, which I can click to see a different text, image, video within the div.
Here is a JSFiddle of what it looks like.
I tried changing the text and that's not so hard but I can't make a code that works the way I want. I want the hidden divs content to be commented out so as not to lag the site, but when I click on a hidden div I want the commented out part to be uncommented out.
This is the script used to switch and hide divs.
$('.Options div').click(function() {
var i = $(this).index();
$('.Frames').hide();
$('#Action' + (i + 1)).show();
});
This is the HTML code:
<div class="Options">
<div class="OptionsTab">OptionRed</div>
<div class="OptionsTab">OptionGreen</div>
<div class="OptionsTab">OptionBlue</div>
</div>
<div class="Holder">
<div class="Frames" id="Action1" style="display: block;">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
<div class="Frames" id="Action2">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
<div class="Frames" id="Action3">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
</div>
commenting out with javascript will not save you memory or loading time, as the sources have already been loaded from server
instead of hiding nodes with hide() (display:none) you can remove the nodes at client side by
$('.Frames').remove();
1) Use a some data- attribute for saving current inner html of element in dataset
2) Clear the current inner html of element with $('your_selector').html(" ");
3) Return inner html from data- attribute into element
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

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>

creating an expandable area in a web page

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

Categories

Resources