Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.
Related
I am trying to implement a collapsable sidebar with a form (search field and submit button) for my site.
I have referenced as script:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However in this combination the form just wont submit, instead it seems to apply the get parameters to the URL and then fires preventDefault of some sort.
It seems like I am using an old version of jQuery , however when I tried to update to:
https://code.jquery.com/jquery-3.2.1.min.js
I noticed that my collapsable menu wont work anymore and the complete style is broken. Also I cant put it in a fiddle since they are mostly already using jQuery.
Sample 1 (Collapse works but form not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sample 2 (Form works but Collapse not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
For the first sample I also tried to declare a input type button instead of submit and trigger it manually using:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Without success.
Thanks in advance!
jquery mobile version 1.4.5 is only locked to certain older jquery versions and have not been tested onto older versions above jquery2.0
Read more about it here if you need to: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.
This would explain why the jqueryversion 3.2.1 doesn't work with your collapsible form.
Meanwhile on the side of the 1.11.3 version, According to the developer console all you have to do is load up your form on a web server instead of loading it locally on your computer (C:/Folder/.html wont work, you need to use browser extensions like https or http)
I hope this helps you as I myself ain't a professional programmer and can't scratch up a working code for you.
It seems like I was misjudging.
With jQuery mobile comes alot of automatically introduced features for e.g. submitting a form in the background using XHR request and not reloading the site.
Imho they should make this a little bit clearer as I had a hard time figuring this issue out. Solution is: for `s or 's you DONT want to be loaded in background, add the tag: data-ajax="false" like so:
<form action="#" method="get" data-ajax="false">
<a href="" data-ajax="false">
Hope this helps someone.
How to load divs from page 2 into page 1 with JavaScript.
Page2.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>
I want to get and use the id content2 from page2 to create a div into page1 with the content of that div, after link was clicked and deleted, and do the same with content3, content4 and successively.
Page1.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
get content
</div>
</body>
</html>
And then would be like that.
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>
I'm new in JavaScript and i have no ideia how to do that. If someone can help. Thanks.
Edited: I wanted a way to do it only with javascript and without jquery if that's really possible. I want my project working offline and I can't do that with jquery, because it doesn't work. I've downloaded jquery plugin and pasted it in my directory, but, didn't work, too.
You can use a combination of JavaScript, jQuery, and AJAX to accomplish this.
First, include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Then write a JavaScript function similar to this one which will replace your div element's html content with the Page2.html file:
var loadNewContent = function {
$.ajax("Page2.html", {
success: function(response) {
$("#content2").html(response);
}
});
};
And then you would need some 'trigger' to run this function such as this:
$("#content2").on('click', loadNewContent);
Hope this helps.
I wrote a small library called ViaJS using javascript & jquery. It basically lets you load content (like a div) from a source to the page. Check it out.
Via is a small library that allows you to load content on to a page dynamically
I have a weird CSS bug going on with bootstrap-ui tooltip:
http://i.imgur.com/90z6ZIT.png
As you can see, the tooltip isn't directly above "aaa" as it should be.
This is my code:
<!doctype html>
<html ng-app="tooltip_app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script>
angular.module('tooltip_app', ['ui.bootstrap']);
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class='container' id='results_container2'>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<div class="col-md-4">
<li class="list-group-item"><span tooltip="This is simply a really big really long tool tip longer and longer and longre This is simply a really big really long tool tip longer and longer and longre">aaa</span></li>
</div>
</ul>
</div>
</div>
</div>
</body>
</html>
However, if I literally copy and paste the file into plunkr the css bug goes away:
http://plnkr.co/edit/I5vFu5M8JRwRhK7kRBaL?p=preview
As you can see, everything works and is aligned as expected.
I'm banging my head here because I can't seem to reproduce the bug on jsfiddle or plunkr; it only appears when served by my node.js webserver. How is this possible? I'm using the same browser for both, and if plunkr and jsfiddle are as sandbox-y as they claim the results should be identical.
I've got to make a single page website for a client of mine, and the Ascensor.js plugin seems to do everything I need it to do. However, I cant for the life of me get it working.
http://kirkas.ch/ascensor/#/Home
Originally I was trying to get it working within a WordPress theme but I gave up and tried to just get it working exactly as the example on the website, no joy.
Heres the code;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.ascensor.js"></script>
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>
</head>
<body>
<script>
$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,
});
</script>
<div id="ascensorBuilding">
<section>
<article class="container_12">
<h1>Home</h1>
</article>
</section>
<section>
<article class="container_12">
<h1>About</h1>
</article>
</section>
<section>
<article class="container_12">
<h1>Contact</h1>
</article>
</section>
</div>
</body>
</html>
This really should be working as i've followed the example exactly. Ive tried it with and without the classes on the article elements (I think the plugin is supposed to create these). Has anyone got experience with this plugin that can give me some help?
Thanks in advance!
First you need to wrap you code with jQuery.ready
$(function(){
$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,
});
});
You are missing both migration plugin and easing plugin.
Demo: Fiddle
I'm leaving here a simple work I'm doing using ascensor.
Feel free to grab all the code you want.
Just remember to set "overflow:auto" to your "section" tag in css AND "overflow:hidden" to the div you use for your building, #house in my case.
http://www.thegrowth.eu/mari/index.php
The version of the plugin I'm using doesn't work on current jQuery version unless you hack the code.
Stick to version 1.8.3, you can grab it from my site.
Also, you will need nothing else but jQuery-UI to use some of ascensor's easing features and such.
And forgive my English :p
right off the bat, I want to explain that I am a total newbie at web design. On that note, I think that I have come across a problem that is beyond my conceptual skill level.
For starters, I have successfully implemented colorbox with an embed youtube video with the following code:
<head>
{js}
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/testStyle'}" />
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:435, innerHeight:344});
});
</script>
</head>
<body>
<p> <a class="youtube" href="http://www.youtube.com/embed/" title="horses">
<img src="/uploads/features/featured-block-1.jpg" /></a></p>
</body>
This code works exactly as I would like it to (i.e. it pops up the video which I can then close by clicking outside the box.)
However when I try to embed this code within another block of code using ExpressionEngine I have new problem: when I try to close the pop-up window, the background stays opaque so that i can no longer see the original webpage. Obviously, something is conflicting in the background, but I just have no idea as to what that conflict might be.
Here is the code surrounding the embed (I mark the embed with dashes):
<head>
</head>
{favicon}
{global_stylesheets}
{js}
<body class="technology">
<div id="wrapper">
{embed='embed/header'}
<div id="masthead">
{embed='embed/nav'}
<div id="banner">
<div style="display:none;">
</div>
</div> <!-- END div banner -->
<br style="clear: left;" />
</div> <!-- END div masthead -->
<div id="content-main">
<div id="content-col1">
<h3></h3>
<div id="lead-sentence">
</div>
<div id="main-body{if subpage_graphic != ''}-graphic{/if}">
<h1> Hello world and welcome to my link!</h1>
------- {embed="in-store-analytics/testing2"} --------
</div> <!-- END div text-content -->
<br style="clear: both;" />
</div> <!-- END div content-col1 -->
{embed="embed/crosslinks"}
<br style="clear: both;" />
</div>
{embed="embed/footer"}
</div> <!-- END div wrapper -->
Again, when I click on the linked image, only a black background appears which I cannot get rid of. Any ideas about what might be conflicting in my code so as to make the embed no longer work or ideas how to go about finding out?
Thanks in advance.
It turns out that one of my embeds was calling the Raphael library, which meant that the library was being called twice. Though I know it's not best practice, I still don't understand why this would result in such radically different functionality.