I have a jQuery code that loads in a HTML file which includes an script. The problem is that the script gets opened in a new tab instead getting displayed in its div where it needs to be.
Script that loads contact in:
$(document).ready(function(){
$('#cont').click(function(event){
event.preventDefault();
$("#content").hide();
$('#home').removeClass("active");
$('#info').removeClass("active");
$('#vergun').removeClass("active");
$('#pasp').removeClass("active");
$('#cont').addClass("active");
$("#content").show();
$("#content").load("contact.html");
});
});
contact.html
<div id="contents">
<h2>Adres</h2>
<table>
<tr>
<td id="tableSpacer"><i class="fa fa-phone"></i></td><td id="tableSpacer">734-389-7473</td>
</tr>
<tr>
<td rowspan="2"><i class="fa fa-globe"></i></td><td>25 Woodland Drive </td>
</tr>
<tr>
<td colspan="2" >28803 Megaton, Commonwealth</td>
</tr>
<tr >
<td id="tableSpacerTop"><i class="fa fa-envelope"></i></td><td id="tableSpacerTop">info#megaton.nl</td>
</tr>
</table>
<div id="contentMail">
<script type="text/javascript" src="/mail/script/mail.js"></script>
</div>
</div>
Code where it loads into
<center>
<div id="content" style="position: static;">
<div id="contents"></div>
</div>
</center>
Code that triggers the script
<a class="menuItem" id="cont" href="#">Contact</a>
What it needs to look like
What happens
Does anyone have a solution for this? Thanks in advance.
The probems is in your mail.js contents:
you are using document.write( instead of $('#contents').html(
So you are replacing all the stuff in the document.
See line 37 of your mail.js file.
Related
I've a problem with below code. I need to pass a variable from html id to thymeleaf variable.
<table class="responsive-table highlight bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr th:each="worker: ${workersList}">
<td th:text="${worker.id}"></td>
<td th:text="${worker.name}"></td>
<td th:text="${worker.surname}"></td>
<td th:text="${worker.email}"></td>
<td>
<a href="#deleteModal" class="btn tooltipped modal-trigger" th:attr="data-id=${worker.id}, data-name=${worker.name +' '+ worker.surname}"
data-position="top" data-delay="50" data-tooltip="Delete"><i class="material-icons">delete</i></a>
</td>
</tr>
<!-- Delete Modal -->
<div id="deleteModal" class="modal modal-fixed-footer">
<div class="modal-content">
<p id="modal-name"></p>
<p id="modal-id"></p>
</div>
<div class="modal-footer">
<a th:href="#{'/delete/'+${modal-id} }" class="modal-action modal-close waves-effect waves-red btn-flat">Yes</a>
</div>
</div>
</tbody>
</table>
<script th:inline="javascript">
$('#deleteModal').modal({
ready: function(modal, trigger) {
var button = $(trigger);
var id = button.data('id');
$('#modal-id').html(id);
}
});
</script>
It won't work. I've to pass it using js because this id's are changeable depends on worker I click. This works, but It can't pass an id to th:href Thanks for help!
They way you have it done, you need to use Javascript to update the ID, as your modal is outside the loop. I would do something like this:
<div class="modal-footer">
<a id="idModalLink" href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Yes</a>
</div>
And in your javascript code:
$('#deleteModal').modal({
ready: function(modal, trigger) {
var button = $(trigger);
var id = button.data('id');
$('#modal-id').html(id);
$('#idModalLink').attr("href", "/delete/" + id);
}
});
I am trying to create loader for my website but it is not working .I am using turbolinks classic for this operation.The loader loads after the page load which i don't want .I need when page is loading that time i need my loader to load and when the page gets load the loader should get disappear both things are not working.Here is my code
<div id="content-wrapper">
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
<div class="row">
<div class="col-lg-12">
<div class="main-box clearfix">
<div class="clearfix">
<div class="common_page gsb1">
<div class="hdr">
<div class="row">
<div class="col-md-3">
<h4>Dashboard</h4>
</div>
<div class="col-md-5">
</div>
<div class="col-md-4 pull-right">
<%=render 'common/date'%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<div class="table-responsive custom-bg">
<table class="custom-table" cellspacing="0">
<tr>
<td><table width="100%" border="0" class="tbl-second-lvl" cellspacing="0" cellpadding="0">
<tr>
<td> Name</td>
<td>Email </td>
</tr>
<tr></tr>
<%#dashboard.each do |dashboard|%>
<tr>
<td><b><%=dashboard[:NAME]%></b></td>
<td><%=dashboard[:email]%></td>
</tr>
<%end%>
</table></td>
</tr>
</table>
<%= will_paginate #dashboard %>
</div>
</center>
<%=render 'common/footer'%>
</div>
<script>
$("#retailer").attr("class","active")
$(document).on('page:load', function(event) {
$('.loader img').css("display","none");
});
</script>
But the loader is not loading the image Can anyone tell me how to do that.And I don't want to use ajax for this thing
set display to block initially :-
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
or just
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;'/></div>
and remove
$(document).on('page:before-unload', function(event) {
//remove $('.loader img').css("display","block");
});
As a result,the loader image will be not visible after document is loaded fully but is visible till then
I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.
http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]
I have the following CSS code:
.Divider {
padding-top:0px;
padding-bottom:500px;
}
and the following HTML
<tr>
<td align="left">
<a wicket:id="button">
<img wicket:id="buttonImg" align="center" style="width:70%"/>
</a>
</td>
<td align="left" >
<div class="Divider"/>
</td>
</tr>
I would have expected 500px to be added as padding at the bottom of the image. Instead it adds it top and bottom. I've tried fiddling with height - same result. Obviously I'm a stupid newbie but can anone give me a clue what form my stupidity is taking pls. Would be most grateful
Try closing the Divider div this way.
<div class="Divider"></div>
Original Code Example <div class="Divider" /> http://jsfiddle.net/rrBXU/1/
Example with <div class="Divider"></div> http://jsfiddle.net/rrBXU/2/
You should be applying the padding to the same cell that the image is in.
You can do it with the <div> or apply the padding-bottom property to the <img>.
<table>
<tr>
<td align="left">
<a wicket:id="button">
<img id="buttonImg" align="center" style="width:70%"></a>
<div class="Divider"></div>
</td>
</tr>
</table>
Also, if you give the containing table a class you'll have greater control over all elements within it by using CSS. Example:
<table class="container">
<tr>
<td>
<a><img src="..."></a>
</td>
</tr>
</table>
.container { }
.container td { }
.container td img { }
You can put the img tag in a div and give it the same style.Or to make it easier just add a new div with the "Divider" class and put the image in it.
The code will be like this:
<td>
<div class="Divider">
..image or other content..
</div>
</td>
If there are other styling attributes in Divider:
<td>
<div class="Divider2" style="padding-top:0px;padding-bottom:500px;">
..image or other content..
</div>
</td>
I'm very new to coding, so bear with me. I've looked at a few of the answered posted for the same question, and have gotten the code to work while inputting my information in some of the solved jsfiddle links.
The problem is: When I plug the working code into my HTML and JS file, it doesn't seem to work. I've looked over my code and am not sure what's breaking it or why it's not showing. I was wondering if anyone could look at my code and tell me why?
The section I'm talking about is the Browse Menu and Menu Output sections. Basically, if you click an image (omnivore, vegetarian, healthy) in the browse menu navigation, the corresponding menu output will be shown.
I've also included my HTML and JS to this post. The styles and spacing are a little messed up right now since I've been tinkering with things in my Mark up. I also recently read that tables are bad, so I will be changing that in my html to unordered lists.
Thanks so much!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Spice Up Your Love Life: An Interactive Dating Experience</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="date, interactive, cooking, culinary, dating, couple, love, date ideas, vancouver, spice, love life, experience">
<meta name="Spice Up Your Love Life" content="SpiceUpYourLoveLife.com is an interactive dating experience in which you and your date can cook a meal together. Eat your heart out!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
#font-face{
font-family: "talldark";
src: url('http://fontsforweb.com/public/fonts/383/talldark.eot');
src: local("Tall Dark And Handsome Condensed"), url('http://fontsforweb.com/public/fonts/383/talldark.woff') format("woff"), url('http://fontsforweb.com/public/fonts/383/talldark.ttf') format("truetype");
}
.diettitle {
font-family: "talldark";
font-size: 6em;
letter-spacing: 5px;
color: #b5a839;
}
.testerz {
font-family: "talldark";
font-size: 1em;
letter-spacing: 4px;
color: #b5a839;
}
</style>
</head>
<body>
<header>
Spice Up Your Love Life: An Interactive Dating Experience
</header>
<div id="topnavcontainer">
<table id="topnav">
<tr>
<td id="break">Breakfast</td>
<td id="lunch">Lunch</td>
<td id="dinner">Dinner</td>
<td id="appetizer">Appetizer</td>
<td id="desert">Desert</td>
<td id="snack">Snack</td>
</tr>
</table>
</div>
<table id="mainnav">
<tr>
<td id="home" class="bordernav">Home</td>
<td id="works" class="bordernav">How It Works</td>
<td id="menu" class="bordernav">Menu</td>
<td id="mainnavbordernone"></td>
<td id="tips" class="bordernav">Tips and Tricks</td>
<td id="contact" class="bordernav">Test Skills</td>
<td id="share" class="bordernav">Share</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="logo"><img src="images/logo.png" alt="Spice Up Your Love Life Logo" width="189" height="170"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="spicetitle" class="title">SPICE</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="upyourtitle" class="title">UP YOUR</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="lovelifetitle" class="title">LOVE LIFE</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="container">
<!--SPLASH CONTENT-->
<div class="content">
<div id="leftgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">HOW DOES IT WORK?</p><br>
<p class="contentdescribed">Does it sound too good to be true? --- Well, it's not! See how it works and and how it all started. </p>
<p class="contentcalltoaction">See how it works</p>
</div>
<div id="middleleftgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">WHAT'S FOR DINNER?</p><br>
<p class="contentdescribed">Eat your heart out! Browse our menu and select what
you'd like to cook for your special date. </p>
<p class="contentcalltoaction">Look at the menu</p>
</div>
<div id="middlerightgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">IMPRESS YOUR DATE!</p><br>
<p class="contentdescribed">Don't get caught with your elbows on the table!
These tips will have them wanting seconds! </p>
<p class="contentcalltoaction">Learn tips and tricks</p>
</div>
<div id="rightgrid">
<img src="images/block.jpg" width="300" height="184"><br>
<p class="contentheader">GOT WHAT IT TAKES?</p><br>
<p class="contentdescribed">Put your skills to the test! Take our multiple choice test to see what culinary level you're at!</p>
<p class="contentcalltoaction">Test your skills</p>
</div>
</div>
<!-- HOW IT WORKS SECTION -->
<div id="howitworkssec">
<div class="waves"></div>
<h3 class="headliners"><strong>How does it work?</strong></h3>
<img src="images/silboth.png" alt="dating silhouette" width="875" height="499">
</div>
<div id="howdesdiv">
<p id="simpleas">It's as simple as 1, 2, 3.</p>
<p id="howdes">
1. Do this thing and that blah blah<br>
2. Then you do this lolol can you believez it?<br>
3. I'll add the actual content when the site is finished.<br>
</p>
Let's begin!
</div>
<!--BROWSE MENU-->
<div id="diet">
<h3 id="meal" class="headliners">Meal Type</h3>
<p id="lefty" class="curly">{</p>
<p id="righty" class="curly">}</p>
<div class="dietchoice"><img src="images/carnivoreb.png" alt="meat options" width="90" height="93" /><h3 class="testerz">Omnivore</h3></div>
<div class="dietchoice"> <img src="images/vegetarianb.png" alt="meat options" width="90" height="93" /><h3 class="testerz">Vegetarian</h3> </div>
<div class="dietchoice"> <img src="images/healthyb.png" alt="meat options" width="90" height="34" /><h3 class="testerz">Healthy</h3> </div>
<!--MENU OUTPUT-->
<div id="output">
<div id="meat">
<p class="diettypeheading">Magnificent Meat Dishes</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/centerchicken.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/centersteak.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
<div id="veggie">
<p class="diettypeheading">Fresh, Colourful Dishes</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/meatballs.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/centersteak.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
<div id="healthy">
<p class="diettypeheading">Diabetic and Heart Healthy Meals</p>
<img src="images/centermeatballs.jpg" alt="meatballsplash" width="600" height="400" id="meatleft" >
<img src="images/centerchicken.jpg" alt="meatballsplash" width="533" height="400" id="meatcenter">
<img src="images/meatballs.jpg" alt="meatballsplash" width="529" height="400" id="meatright">
</div>
</div>
<!--END OF CONTENT-->
<div class="splashimage">
<img src="images/banner3.png" alt="splash image" width="1664" height="400">
</div>
<div id="sitemap">
<table class="sitemaptab">
<tr id="sitemaptitles">
<th>Get Social</th>
<th>Quick Links</th>
<th>Terms of Use</th>
</tr>
<tr id="row_two">
<td class="social"><img src="images/socialmedia/twit_sm.png" alt="sm-twiticon">Follow Us On Twitter</td>
<td class="quicklinks">Home</td>
<td class="terms">Privacy Policy</td>
</tr>
<tr id="row_three">
<td class="social"><img src="images/socialmedia/fb_sm.png" alt="sm-fbicon">Like Us On Facebook</td>
<td class="quicklinks">Browse Menu</td>
<td class="terms">Contact</td>
</tr>
<tr>
<td> </td>
<td class="quicklinks">How It Works</td>
</tr>
<tr>
<td></td>
<td class="quicklinks">Tips and Tricks</td>
</tr>
<tr>
<td></td>
<td class="quicklinks">Share</td>
</tr>
</table>
</div>
<footer>
<table id="footer">
<tr>
<td id="copyright">Copyright © Spice Up Your Love Life 2013</td>
<td id="webdesby">Web Design By: Ticking and Talking Media</td>
</tr>
</table>
</footer>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/spicelovelife.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</body>
</html>
JavaScript:
// Scrolling Function
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
// Load All Images
$('body').waitForImages({
waitForAll: true,
finished: function() {
// All images have loaded.
}
});
//Hide All Divs
$("#output > div").hide();
$(".dietchoice a").click(function(e) {
$("#output div").hide();
$(this.hash).show();
e.preventDefault();
});
$("#areas div:not(#meat)").hide();
Instead of
$(this.hash).show();
You should probably use
$(this.attr('href')).show();
this.hash probably returns undefined because the property hash doesn't exist.
If my solution throws an error like "undefined method attr()" you will probably need to use the jQuery selector.
$($(this).attr('href')).show();
I'd advise using the console object for debugging purpose. You can find some docs about debugging on the Mozilla Developer Network.
This selector $("#output > div") is different from this selector $("#output div"). According to your HTML, both selectors returns the same elements but if you were to change the HTML structure issues might arise.
try, putting the modernizr, jquery and plugin scripts before your code, meaning change this:
<script src="spicelovelife.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
to this:
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/spicelovelife.js"></script>
Hope this help.