Automatically fill div from file - javascript

I am very new to html but need to throw together something for work as a POC, so apologies if I am asking a question that have been answered before, the truth is I wouldn't even know how to go about looking for the question because I am not sure how to ask it myself
I have included a description of what the code is doing at the moment and what I am trying to get it to do. I have also included the code itself which I have stripped it down to it's most simple form and embedded it as a snippet so that you can see how it behaves in it's current state.
CURRENT STATE
click on a topic
div opens up and hard coded, default information gets displayed
click on the topic name again/on the hide link/on any other topic, do any of these three things and the div closes again. If I click on any of the topics again, the same information get's displayed as before (regardless of what topic was selected)
WHAT I WOULD LIKE IT TO DO
click on a topic
takes the topic id and then reads data in from a text file relating to that specific topic (each topic has it's own file, it will read the entire file)
opens up the div as before except now it populates with the data that it just read in
if I hit the same topic again I want the div to close
if I hit close, obviously I want the div to close
if I hit another topic, instead of closing the div, I want it to just read in the info for that topic from it's own specific file and repopulate the div with the new data
<!doctype html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
font-family: Verdana, sans-serif;
font-size:0.8em;
}
header,nav,section,article,footer {
border:1px solid grey;
margin:5px;
padding:8px;}
nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline;
margin:5px;
}
.slidingDiv {
height:300px;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
</head>
<body>
<header>
<h1 position="centre">Blah</h1>
</header>
<nav>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
</nav>
<section class="slidingDiv">
<h1>Main heading</h1>
<article>
<h2>Sub heading</h2>
<p>Blahblahblahblahblah</p>
</article>
hide</div>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>

Sounds like using a database instead of a text file might be more along the lines of what you would need. If you made a database that hosted the title, content, links, etc. related to each topic, you could fill each of the <article> tags from the database rows with a little bit of php.

Related

Div suddenly became unresponsive

I am working on a project to explain jQuery to my students. I had a div that would slide on click and then added a second to hide. Then nothing worked so I removed all new code but the slide div no longer works.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
// slide function
$("#frog").click(function() {
$("#frog").animate({left: "200px"}, 500);
});
</script>
<style type="text/css">
#frog{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 20px;
}
</style>
<title>I hate JS!</title>
</head>
<body>
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<h2>Top 3 Best Animations</h2>
<h4><li>Slide</li></h4>
<div id="frog"></div>
</ol>
</body>
Your HTML is invalid. This can break any javascript as elements get rendered wrong. It should look like this:
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<li><h2>Top 3 Best Animations</h2></li>
<li>
<h4>Slide</h4>
<div id="frog"></div>
</li>
</ol>
<script>//javascript here</script>
Also, it is strongly recommended to include your JS before your closing body tag. Because when the javascript initiates, the element it has to bind to, has to exist first! If the javascript renders before the element does, it will never be able to find it, therefore not work, so include javascripts at the end of your document, not the start.
You also need to wrap your javascript within a
$(function(){
//Javascript here
});
So that it will trigger on all browsers when the page has finished loading. (Not all browsers automatically trigger javascripts)
See this JS fiddle for a working example:
https://jsfiddle.net/5cxnLe4v/1/
-- also slightly important: make sure you close all your elements, like the </body> and </html>!

JS | Div will not fade in onscroll

Trying to add a "scroll to top" button to fade in when I scroll down the webpage. Doesn't want to know, I've applied this exactly another webpage and works fine, on this web page, it just doesn't want to know. What am I doing wrong?
The script & style sheets are separate & attached in the head section, they do not make up the document body of the webpage.
Long time,
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="scroll-to-top-button">
Top<i class="fa fa-caret-up" aria-hidden="true"></i>
</div>
</body>
<html/>
/----------------------------------/
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}
});
</script>
/---------------------------------------/
<style>
#scroll-to-top-button{
right:20px;
bottom:20px;
display:none;
background-color:#3A83F3;
position:fixed;
border-style:none;
border-radius:5px;
width:100px;
z-index:99999999999;
}
#scroll-to-top-button a{
padding:10px;
display:block;
color:white;
font-size:17px;
text-decoration:none;
}
#scroll-to-top-button a:hover{
background-color:#81AFED;
border-radius:5px;
}
#scroll-to-top-button a i{
padding-left:10px;
float:right;
}
</style>
If the script is part of the js you are calling first, that may be your problem. You have to load jquery first. If you run developer tools, you will probably see in the console that it fails at "$(window)".
First of all move jquery libs to the top of custom scripts
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
And for fade in using js you can follow this links.
It is well explained -
Fade In on Scroll Down, Fade Out on Scroll Up
Since I answered first, I will reply to your comment to the other answer that is similar to mine:
It isn't stupid, as javascript - unless dynamically loaded - loads in the order listed. Since jquery is just a javascript library, it has to load before you can call any jquery functions.
It is possible that your other code had inherited jquery some other way. It would be hard to tell without context.
Load your jQuery library script above your personal script by putting it on the line above it
Try using this:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}});
});
</script>
But it does appear that DaniP's fiddle is working correctly: https://jsfiddle.net/by49ph5s/

AJAX back button history [duplicate]

This question already has answers here:
Getting Backbutton to work in single page website and implementing "speaking" URLs
(3 answers)
Closed 7 years ago.
Greets,
Before marking this question duplicate, I would like to tell that I have looked every question that could help me but neither of them does. I have a simple example below, your help will be appreciable.
Example:
Index.html page which gives 3 links to different pages, these links are not directed with href but with AJAX (without changing the URL). The content of the div is changed without refreshing the page and without changing the URL.
Problem:
I can not track the history, say I clicked page 2 -> page 3 -> page 2 -> page 1
Now, the client wants to go back to previous page (div content). How is this possible.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Back button/History Problem</title>
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<!-- Menu for links to pages -->
<div id="menu">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<!-- HTML page is added without change in the URL address -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
/* Loads html page by AJAX in the content div */
function showPage(page){
$("#content").load("pages/page"+page+".html");
}
</script>
</body>
</html>
page1.html
<h1>Page 1</h1>
page2.html
<h2>Page 2</h2>
page3.html
<h3>Page 3</h3>
I have not tried this plugin https://rosspenman.com/pushstate-jquery/ but for what I've read this may help you...let me know if it can do the job :)

Extra space added after list on jQuery reload of div in IE

I am writing a web page which updates a list using jQuery when something is selected. Below the list is a button. The update works fine in Firefox and Chrome, but in IE, a bit of space is added between the list and the button every time it updates. Following is a stripped-down example that does the same thing:
<html>
<head>
<style type="text/css">
#list {
padding: 10;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="test">
<ul>
<!-- List -->
<li>
<div id="list">
<ul>
<li>before 1</li>
<li>before 2</li>
</ul>
</div>
</li>
<!-- Button -->
<li>
<div>
<button id="button" onClick="reload();">button</button>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function reload() {
var html =
"<ul>" +
"<li>after 1</li>" +
"<li>after 2</li>" +
"</ul>";
$("div#list").html(html);
}
</script>
</html>
Click the button. In Firefox and Chrome, it stays put. In IE (9), it shifts down a bit (a bit meaning about 10 or 20 pixels. Easily noticeable to the human eye, that is) every time I click it. Can anyone tell me what is causing this?
Thanks.
Update
Seems like the problem is related to IE padding calculating rather than your code, since the same happens using js .innerHtml() directly.
I would then suggest removing the padding and adding margins to the ul, since it affect the element you are removing maybe also the margins will be removed this time.
#list {
padding: 0;
}
#list ul {
margin:10;
}
http://jsfiddle.net/qEphF/6/
According to jQuery docs
This method uses the browser's
innerHTML property. Some browsers may
not generate a DOM that exactly
replicates the HTML source provided.
Maybe you should try a different approach. For example
$("div#list").empty().append($(html));
<style type="text/css">
#list {
padding: 10;
}
</style>
Each time you call the reload function, IE adds 10 padding which is the cause of your problem.

Displaying same image multiple times at different locations in a web page using JavaScript

I have a simple web page with a simple puzzle. There are some images that user is supposed to drag to their designated drop zones. I use solution in JavaScript generated by DreamWeaver.
I want to add a JavaScript function that will show a correct.png or wrong.png image next to the image a user just dropped. The straightforward way to do it is to just have correct and wrong div elements for each of the draggable images. But is there a more elegant way?
Another way to put it would be:Write a JavaScript functions Show(commonImageId, nextToImageId) and Hide(commonImageId, nextToImageId) that would be used like Show('correct', 'draggable1');.
Instead of having multiple divs that you show and hide, you can try this solution as well.
Create two styles, each with a different background image set. Whenever you trap the event that a given image should be marked as correct or wrong, simply swap the style of the div, which will have the affect of switching the background image.
Very quick (and in need of some cleanup) sample code below, you've got the right idea with setting the type with a function...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
width:80px;
height:80px;
float:left;
}
.correct{
background-image:url('correct.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.wrong{
background-image:url('wrong.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.item{
float:left;
height:80px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>

Categories

Resources