I am not able to cope with the iframe. I am trying to insert my curriculum in it, but although the width seems easily managable, the height does not repond to increments in the feature. The result is an iframe that ocupies the width of the page but is wide too narrwo to confortably scroll down. Downhere I leave the code (The issue is halfway) and my webpage, https://rubencioak.github.io/cv2.html, in case it's of any help.
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWMMZHX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="header">
rubencioak.github.io
<ul class="icons">
<li><span class="label">Email</span></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Curriculum Vitae</h1>
</header>
<!-- About Container -->
<div class="w3-container">
<div class="w3-content w3-text-color2 w3-padding-64" style="max-width:700px">
<p>
<span> </span> Download [pdf]
</p>
</div>
</div>
<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
<div class="responsive-wrapper responsive-wrapper-wxh-550x2000 w3-text-color2">
<p> <iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<p>Your web browser does not support iframes. Please click at the pdf link above. </p> </iframe> </p>
</div>
</div>
<section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li>Homepage</li>
<li>Research</li>
<li>Curriculum</li>
<li>Teaching</li>
<li>Contacts</li>
<li>Referees</li>
<!--<li>
<span class="opener">Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li> -->
</ul>
</nav>
<section>
<header class="major">
<h2>Contact</h2>
</header>
<p>Please, contact me with any question, specially those regarding my reseach. Your feedback will be much apreciated</p>
<ul class="contact">
<li class="icon solid fa-envelope">rubenprzsnz#gmail.com</li>
<!-- <li class="icon solid fa-phone">(000) 000-0000</li> -->
<li class="icon solid fa-building">
Departament d'Economia<br />
Edifici B<br />
Universitat Autònoma de Barcelona<br />
08193 Bellaterra, Barcelona, Spain</li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: Unsplash. Design: HTML5 UP.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
Change your height in your inline style on your iframe to vh (viewport height)instead of %. I changed the height to 1000vh using Dev Tools and it nearly filled the whole screen. That's not the ideal fix, but it works.
<iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<!------Change height to vh------>
<iframe width="75%" height="500vh" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
Related
I am attempting to add two {content} areas on my Weebly website that are separated by custom code in the HTML/CSS editor. I am not understanding the basic fundamentals to how {content} sections work in Weebly.
I initially copied and pasted:
<section id="wb_sections">
{{#sections}}
<div class="row">
{content}
</div>
{{/sections}}
</section>
But it simply duplicated the content on the page.
I am hitting a dead end in most of my searching. Please see the code below. I am trying to add a second editable (drag and drop) {content} section area between the "Portfolio" section and "footer" section. Thank you for your help in advance.
<body id="top" class="homepage-sections home-custom-header wsite-theme-light">
<!-- Pre Loader -->
<div id="loading" class="loading"></div>
<div class="wft-layout">
<!-- Main Wrapper -->
<div id="home" class="top">
<!-- Info Bar - Text, Social -->
<div class="info-bar">
<div class="row">
<div class="clearfix">
<div class="info-left">
<ul class="info-links clearfix">
<li><i class="typcn typcn-time"></i>{info:text}</li>
</ul>
</div>
<div class="info-right">
<ul class="info-links clearfix">
<li class="info-social">{social}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Top Bar & Menu -->
<div class="top-bar">
<!-- Logo, Menu, Cart-->
<div class="header-bar ib-large">
<div class="row d-table">
<div class="eq-col-left pad-0">
{logo}
</div>
<div class="eq-col-right pad-0">
<div class="details-bar">
<div class="row">
<div class="clearfix">
<div class="details-right">
<ul class="details-links clearfix">
<li class="t-address"><i class="typcn typcn-location-outline"></i>{details-address:text}<br>
<span>{detail-address:text}</span>
</li>
<li class="t-phone"><i class="typcn typcn-phone-outline"></i>{details-phone:text}<br>
<span>{detail-phone:text}</span>
</li>
<li class="t-email"><i class="typcn typcn-mail"></i>{details-email:text}<br>
<span>{detail-email:text}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="menu-container" class="menu-container">
<div class="row">
<span id="cart">{minicart}</span>
<!-- Menu Toggle -->
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle"></label>
<!-- Menu -->
<div class="menu relative">
<div class="nm-inner">
<!-- Scroller Menu Items -->
<div id="scroller-nav">
<ul id="nav">
<li class="home-nav">{menu1:text}</li>
<li class="sec1-nav">{menu2:text}</li>
<li class="sec2-nav">{menu3:text}</li>
<li class="sec3-nav">{menu4:text}</li>
<li class="sec4-nav">{menu5:text}</li>
<li class="sec5-nav">{menu6:text}</li>
<li class="blog-nav">{menu7:text}</li>
<li class="features-nav">{menu8:text}</li>
</ul>
</div>
<!-- Multi Page Menu -->
<div id="multi-nav">{menu}</div>
<!-- Mobile Menu -->
<div id="navmobile">
<div class="mb-inner">{menu}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Header -->
<section id="home" class="home">
<div class="wft-banner-wrap">
{{#header}}
<div class="container">
<div class="wft-banner">{content}</div>
</div>
{{/header}}
</div>
</section>
<!-- Sections -->
<section id="wb_sections">
{{#sections}}
<div class="row">
{content}
</div>
{{/sections}}
</section>
<!-- Portfolio Section 3 -->
<section id="section-three" class="portfolio pad-t100 relative wft-content-wrap" style="background-color: #ffffff;">
<div class="row wft-ph ph-standard-3">
{portfolio:content global="false"}
</div>
<div class="portfolio-img-row row wft-ph ph-standard-3">
<!-- portfolio starts here -->
<!-- Portfolio Filter -->
<!-- to add more title tabs, just add more <li> lines and give it a new class and {porttitle?:text}
<ul class="option-set" data-option-key="filter">
<li><a class="selected" href="#filter" data-option-value="*"><span></span>All</a></li>
<li id="filter1"><span></span>{porttitle1:text}</li>
<li id="filter2"><span></span>{porttitle2:text}</li>
<li id="filter3"><span></span>{porttitle3:text}</li>
<li id="filter4"><span></span>{porttitle4:text}</li>
<li id="filter5"><span></span>{porttitle5:text}</li>
</ul> -->
<!-- End Filters -->
<!-- Portfolio Items -->
<div id="posts" class="row isotope ph-portfolio">
<!-- Start Project -->
<div id="folio1" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio1:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio2" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio2:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio3" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio3:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio4" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio4:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio5" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio5:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio6" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio6:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio7" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio7:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio8" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio8:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio9" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio9:content global="false"}</div>
</div>
<!-- End Project -->
</div>
<!-- portfolio end -->
</div>
</section>
<!-- Contact Footer -->
<footer id="section-five" class="contact relative clearfix">
<div class="row pad-b100 relative wft-ph ph-standard-5">
{contact-one:content}
</div>
<div class="copyright">
<div class="row pad-tb25">
<div class="twelve text-center">
© {copyright:text}
</div>
</div>
</div>
</footer>
<!-- Back to top -->
<div class="back-top-wrap text-center">
<i class="back-top relative text-center typcn typcn-arrow-up-outline"></i>
</div>
</div>
<!-- End Layout --->
<div style='display:none'>{{footer}}</div>
<!-- Javascript -->
<script>
var para_one = jQuery('#wft-para-img1').find('img').attr('src');
jQuery("#parallax1").css('background-image', 'url("' + para_one + '")');
var para_two = jQuery('#wft-para-img2').find('img').attr('src');
jQuery("#parallax2").css('background-image', 'url("' + para_two + '")');
</script>
<script src="/files/theme/jquery.home-custom.js"></script>
<script src="/files/theme/jquery.owl.js"></script>
<script src="/files/theme/jquery.home-main.js"></script>
Technically, this is a Duplicate Question Answered Here
But, since it wasn't explained in the original, let me just point out the issue you are having. {content} can only be used once. For other content areas, you need a custom tag, like {content2:content global="false"} Notice the custom name before the :
So, in other words, each custom content area must have a it's own custom name. Then, global="false" means it will not be duplicated on other pages. See the: Answer Here
I checked bootstrap.min.css and width:100% is not mentioned for navbar, navbar-inverse and navbar-fixed-top classes but still it is displaying 100% width for header section.
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container">
<div >
<h3>Free Area</h3>
</div>
</div>
</nav>
Similarly I want to display footer in 100% width according to page width. I used below CSS and HTML code but it is not displaying 100% width footer. So how can I make footer so it displays in entire width of page?
CSS
footer { margin: 0px 0; background:#006699; }
HTML
<footer>
<div class="container">
<div class="row ">
<div class="col-md-6 col-sm-6">
<h3>Section Area 01</h3>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="col-md-6 col-sm-6">
<h3>Section Area 02</h3>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
</footer>
As requested by the OP, the issue the OP is facing is, having either <footer> or <header> to be confined to the width of the .container of the Bootstrap framework. One best solution for this is to put the elements directly under the body.
So, your solution would be, replacing (probably) this old code:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<!-- Contents -->
</header>
<!-- Body -->
<footer>
<!-- Contents -->
</footer>
</div>
</div>
</div>
</body>
To get it out of the .container, which limits the width and placing it directly under <body> like this:
<body>
<header>
<!-- Contents -->
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Body -->
</div>
</div>
</div>
<footer>
<!-- Contents -->
</footer>
</body>
I need that some content in my page would keep its position on screen even if the user scrolls the page right.
My HTML is very simple:
<head runat="server">
<title>Bla</title>
</head>
<body>
<!--header start-->
<header class="header dark-bg"></header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu"></ul>
<!-- sidebar menu end-->
</div>
</aside>
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home
</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
</section>
</section>
</body>
Take a look at:
https://jsfiddle.net/2wn8qgyb/
When scrolling right, I expect that the "Dashboard" and "Home / Dashboard" text wouldn't disappear and stand still. I want the user to have an option to click it without scrolling back to the left.
In your html, add an extra classname to this div <div class="col-lg-12">, it should now look like <div class="my-nav-bar col-lg-12">
After that, just add this to your css file:
.my-nav-bar{position:fixed;}
Here is a working Demo
Add this to your css:
.page-header {
position:fixed;
}
.breadcrumb {
position:fixed;
}
Fixed the Position of your div which you don't want to disappear
.div
{
position:fixed;
}
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element
In my HTML5 / JQueryMobile app, I use several data-role="page" divs in the same index.html file:
<body>
<!-- Map page -->
<div data-role="page" data-theme="b" id="map">
<div data-role="header" data-theme="b">
<h1>Map</h1>
</div>
<div data-role="content">
<div id="map_canvas" style="width:320px; height:300px; float:left; border: 1px solid black;">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Map</li>
<li>List</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<!-- List page -->
<div data-role="page" data-theme="b" id="list">
<div data-role="header" data-theme="b">
<h1>List</h1>
</div>
<div data-role="content">
…
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Map</li>
<li>List</li>
<li>Settings</li>
</ul>
</div>
</div>
<!-- Settings page -->
<div data-role="page" data-theme="b id="settings">
<div data-role="header" data-theme="b">
<h1>Settings</h1>
</div>
<div data-role="content">
...
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Map</li>
<li>List</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
</body>
This code does not work very nicely. The selected item of the navigation is not well highlighted after several clicks.
Is this page structure (several data-role="page" in the body) the correct way to do ?
UPDATE
Seems to be the way to do it (http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.html), so I must miss something.
You're using Alpha version 1, they have improved much with Alpha version 4: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html
You might also have a look at the toolbar section as well:
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/index.html
Demo: http://jsfiddle.net/jAwPR/3/