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
Related
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">
so what i miss ?i try to solve it but i cant or should i start again?
that is html code and if you want css too i can send it :
<section id="contact" class="section">
<!-- Container Starts -->
<div class="container">
<!-- Start Row -->
<div class="row">
<!-- Start Col -->
<div class="col-lg-6 col-md-12">
<div class="Container">
<div class="contactinfo">
<div>
<h2>Contact Info</h2>
<ul class="info">
<li>
<span><img src="img/contact/Email.png"></span>
<span>colbration#visionviewplus.com</span>
</li>
<li>
<span><img src="img/contact/wechat.png"></span>
<span>wechat ID : 212131321</span>
</li>
<li>
<span><img src="img/contact/qq.png"></span>
<span>QQ ID : 212131321</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</section>
=============================
I am trying to create a Split Layout using https://tympanus.net/codrops/2013/10/25/split-layout/
However, I am unable to see the contents below the split view. I am able to scroll but cannot see contents of element id "services". I am not posting the CSS in order to avoid making it readable. The CSS can be found on the link above. Thank you.
<div id="splitlayout" class="splitlayout">
<div class="intro">
<div class="side side-left">
<header class="codropsheader clearfix">
<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
<h1>Split Layout</h1>
<nav>
<span>Previous Blueprint</span>
<!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a-->
<span>back to the Codrops article</span>
<span>Go to the archive</span>
</nav>
<div class="demos">
<a class="current" href="index.html">Effect 1</a>
Effect 2
</div>
</header>
<div class="intro-content">
<div class="image-container">
<img class="img-fluid" src ={% static "images/teacher-4.png" %} alt="alternative">
</div>
<h1><span>Toby Blue </span><span>Web Designer</span></h1>
</div>
<div class="overlay"></div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="image-container">
<img class="img-fluid" src ={% static "images/student-2.png" %} alt="alternative">
</div>
<h1><span>Amy White </span><span>Web Developer</span></h1>
</div>
<div class="overlay"></div>
</div>
</div><!-- /intro -->
<div class="page page-right">
<div class="page-inner">
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</div><!-- /page-inner -->
</div><!-- /page-left -->
→
←
</div><!-- /splitlayout -->
<!-- Services -->
<div id="services" class="cards-1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Create an eQuiz and schedule it in less than 1 minute.</h2>
<p class="p-heading p-large">Now all you need are a few clicks and your students get an eQuiz</p>
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-12">
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/employee.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Pick Difficulty & Topic</h4>
<p>The questions and quiz comes with a level of difficulty and spread across all chapters </p>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/quiz-icon.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Random Q&A</h4>
<p>Students get random questions and options from our huge pool of questions</p>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/quiz-2.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Different Options</h4>
<p> You can test students on MCQ, True/False & Essay Type Questions </p>
</div>
</div>
<!-- end of card -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of cards-1 -->
<!-- end of services -->
Change the position: fixed; on .side to position: absolute;.
.side {
position: absolute;
top: 0;
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
}
Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/YzpWvaZ
I'm using a template that uses and I used it to implement a multi-language select. Problem is: when i switch to mobile view the top-header disappears and only the navbar stays. Does anyone have an idea how i can keep the top-header? Template uses Bootstrap 3
<body>
<div class="box-layout">
<header class="header-style-1">
<div class="bg-header-top">
<div class="container">
<div class="row">
<div class="header-top">
<div class="row">
<div class="col-md-3">
<img src="../assets/images/index/logo.png" alt="logo" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="header-top-right pull-right">
<ul class="header-contact">
<li>
<i class="flaticon-vibrating-phone"></i>
<div class="h-adress-content">
<h6>Telefon</h6>
<p>XXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<i class="flaticon-placeholder"></i>
<div class="h-adress-content">
<h6>Adresse</h6>
<p>XXXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<div class="h-adress-content">
<p><img src="../assets/images/index/de.png"> DE</p>
<p><img src="../assets/images/index/pl.png"> PL</p>
</div>
<!-- .h-adress-content -->
</li> `
Need: To show / replace an another DIV from existing DIV tag on the same page while using data-role="page">
Problem: While using hide/show method to the div for displaying the next page reg button(click)=>reg DIV content> but the Reg DIV Content is displayed for only 2 sec, and then the apps is exited and comes to the main menu in Emulator.
Code_STRUCTURE: (as i mentioned below)
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
</div> <!-- page -->
// in J query call
// to show reg content then call
$('#log_in').hide(); // or also tried as $('#log_in').css('display','none');
$('#reg').show(); // or also tried as $('#reg').css('display','block');
Platform : Android
Compiled in: Eclipse Emulator
If any one have the answer, please post it! and if you prefer to give any more suggests and also be knowledgeable. Thank you for visiting this post!
Edited: (my old Code)
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
<form>
<input><!-- something goes here-->
<button id="login">Login</button>
<button id="reg">Register</button>
**</form>**
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
(Corrected Code):
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
<form>
<input><!-- something goes here-->
**</form>**
<button id="login">Login</button>
<button id="reg">Register</button>
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
The problem is most certainly with your js code.
You should be able to successfully use both jQuery show()/hide() and display: none;.
Here is working example