I was trying to include an HTML file in another HTML File div like follows,
<body>
<form action="#" method="post">
<div class="container">
<div class="sidebar">
<!-- Do not insert any tags here -->
</div>
<div class="contentbody">
<div class="titlearea">
<div class="userprofile"></div>
<div class="pageheading">
<h1>Page Heading</h1>
</div>
</div>
<div class="formarea">
<!-- This is where I have to put the html page which contains a navigatin menu-->
<!--#include virtual="menuset1.html" -->
</div>
</div>
</div>
</form>
But when I run it on chrome it doesn't show up (menuset1), when I test it on dreamweaver it appears from behind of all elements and not in the correct position, Please guide me on this.
I think you should use jquery like,
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
....
....
<script>
$(function(){
$(".formarea").load("menuset1.html");
});
</script>
Or use PHP like,
<div class="formarea">
<?php
include('menuset1.html');
?>
</div>
Read php inclusion of files
Related
Being new to bootstrap and scripting with html/css in general, I am attempting to create a simple html table (one row with three columns). Each column is to be even (taking up one third of the table which it exists inside of. The problem I am encountering is that it appears to be taking up only two-thirds (2/3) of the available space with in the table. I've looked on the internet for solutions, googled, read a several posts/articles on stack and other places, but I've not found a solution and am hoping for help.
You can see a straight html render of the error here
Here is a picture detailing the issue:
As the example image shows the thin red column is taking up one third of the table space (green bordered table), however that table is not expanding to occupy the full space available to it in the red div. I've looked for through the html render and not found a cause for the issue.
<div class="area">
<section class="wrapper scrollable">
<div class="main-grid">
<div class="agile-grids">
<!-- blank-page -->
<div class="blank">
<div class="blank-page">
<h1>Session is active</h1>
<table class=" " style="border: 1px solid red;">
<tbody>
<tr scope="row" style="border: 1px solid red;">
<td class="text-center" style="border: 1px solid green;">
<div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
<div class="card_user-charProfile">
<img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">
<div class="card">
<div class="card">
<p> content goes here</p></div>
</div>
</div> <!-- end row -->
</div><!-- end CHARACTER PROFILE OUTER DIV -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
Here are the CSS declarations / links
<script language="JavaScript" type="text/javascript">
<!-- This JS disallows hijacking into someone else's frame...
if (top.location != self.location){top.location=self.location}
//-->
</script>
<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">
<!-- font CSS -->
<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<!-- __themes/_fonts/font-glyphicons.css -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">
<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script>
$(function () {
$("#supported").text("Supported/allowed: " + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$("#toggle").click(function () {
screenfull.toggle($("#container")[0]);
});
});
</script>
Why are you using the table? You can handle that all with the bootstrap grid system. Avoid using table in your project. But I will suggest you to give it a width:
td{width:100% !important;}
Try doing this it may help you.
I have created a simple Bootstrap3 layout and want to use blaze templates in meteor but the content from my template is always rendered after my HTML structure.
Here is the code:
<head>
<title>demo app</title>
</head>
<body>
{{#Layout template="mainLayout"}}
{{#contentFor region="main-content"}}
This is the main content area
{{/contentFor}}
{{/Layout}}
</body>
<template name="home">
{{welcomeText}}
</template>
<template name="mainLayout">
<div class="container">
<div class="row">
<div class="col-sm-6">LOGO</div>
<div class="col-sm-6">LOGIN BUTTONS</div>
</div><!-- /header row -->
<div class="row">
<div class="col-sm-12">
<!-- navigation -->
</div>
</div><!-- /nav row -->
<div class="row">
<div class="col-sm-12">
{{> yield region="main-content"}}
</div>
</div><!-- /content row -->
</div><!-- /container -->
</template>
The JavaScript:
if (Meteor.isClient) {
Template.home.welcomeText = function () {
return "Welcome to my site.";
};
}
When I run this, the Bootstrap3 structure works fine but welcomeText is rendered underneath the container.
It seems that I overlooked to pass layoutTemplate option to my iron router route - now it works.
I have written the code...I want to open a youtube video in popup using iframe by clicking on the photo.below is the code i have written.
I have written the code...I want to open a youtube video in popup using iframe by clicking on the photo.below is the code i have written.
<iDOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="div" id="div1">
<img src="image1.jpg" onclick="play()" width="200px" height="200px" id="Zu5XUbig5G0">
</div>
<div data-role="footer" data-position="fixed">
<h4>Featured</h4>
</div>
</div>
<div data-role="popup" id="popup2" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<script>
function play()
{
var vid=document.getElementById("div1").getElementsByTagName('img')[0].id;
//alert(vid);
{
alert(vid);
document.getElementById("popup2").innerHTML="<iframe src='http://www.youtube.com/embed/tyOy3kRzkcM' width='480' height='320' seamless='' id='plyerIframe1'></iframe>";
//alert(vid);
}
}
</script>
</div>
</body>
</html>
I've got an application in jQuery Mobile. Every time a page is shown, some JavaScript must be executed to hide/show some elements (depending on the session state).
I've spent lots of time on this and cannot figure out why the JavaScript is not hiding the elements as expected, it sometime does it, sometime not. It seems a bit random. The DOM in fact seems consistent. The element that should be hidden have display: none and those visible have display: block, however it doesn't match what can be seen in the browser.
I managed to reduce the issue down to a very simple case. It's pretty much the basic boilerplate template with my added JavaScript:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 2
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 1
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
test.js
$(document).bind("pagechange", function(event, data) {
console.info('Changed to page: ' + data.toPage.attr('id'));
$('#el1').hide();
$('#el2').show();
});
You can easily test it by putting these three files on a local server. page1.html and page2.html are pretty much the same pages (just for testing), and test.js just hide #el1 and show #el2. This JavaScript is always executed successfully when the page is changed (the console statement always shows up), however #el1 is sometime hidden, sometime not, when it should always be hidden.
And again, what puzzles me the most, is that everything seems correct if I look at the DOM directly (in Chrome console). The CSS is clearly display: none, yet the element is still visible.
Any idea what could be causing this issue?
A couple of things you might try.
Use on instead of bind. Perhaps you are binding to the the document and the document is changing, loosing the bind. Using on should be able to get rid of this.
Use on directly on the page:
$('#page1').on('pagechange', function() {});
I wonder how to input #section in the partial view in Razor view. Is that possible or I must put it in a view only?
Thanks.
Why not try just creating a partial view that has all the javascript and css you want and just rendering that partial view in the layout? I don't think you need sections to get that done. The point to sections is to tell full views that they can have specific sections just for them and that the partial views won't force them to look like anything.
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#Html.Partial("_HeaderLinksAndScripts")
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
#Html.Partial("_MenuPartial")
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
this is a footer
</div>
</div>
#Html.Partial("_FooterScripts")
</body>
</html>
Just put the site-wide css and javascripts in the appropriate partial views.
Put your scripts in that partial view not in a section (since you cant do #section in a partial) OR simply put them in your main layout and control their rendering conditionally.