So I have about 20 projects to show on my website and since I don't want to create 20 HTML files for each of them, I use this script to link people to the specific projects they click on. And so the link is like: http://mywebsite.com/projects.html?option="project1"
The problem I notice is that it usually displays the first project for about 1 second or longer before it shows the project I click on, I don't know what's the cause, I don't know if it's a glitch. Is there a way to fix it?
The script and my html:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
<a href="projects.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item">
<h3>Sleep infographic</h3>
<span class="category">Motion graphics</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="images/thumb_item07.gif" />
</div>
<div id="view">view</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
</a>
HMTL of the project page:
<div class="container">
<div class="boxes" id="haivinh">
<div class="sidebar full-width">
<div class="desktop-6 tablet-12 columns">
<!--
.sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates
-->
<div class="box-info">
<h4 class="border-top">
Metro train ad</h3>
<p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p>
</div>
<!-- // .box-info -->
</div>
<!-- // .desktop-6 -->
</div>
</div>
My guess would be that you default to showing project 1. You can tell this because your showDiv() function starts with a .hide(). As your function is not run until document.ready, you may see the initial setup for a short period before the function is run.
To fix this, make sure everything is hidden before running your js.
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)
Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>
I attempt to add a background image and use cover to let the browsed resize the image. However the image is very small and doesn't cover the whole background.
I am new to angular so I have a very small idea about how this works.
Also, the search bar isn't in the middle despite using zurb to manage spacing for me.
Here is what the page looks like
Here is the code:
<div >
<!-- Above fold -->
<div class="row">
<div id = "backgroundImage" class="large-12 small-12 columns" ng-style="{'background-image':'url(img/mainBackground.png)','background-size' : 'cover'}">
<!-- search bar -->
<div class="row">
<!--empty -->
<div class="large-3 small-3 columns">
</div>
<div class="large-6 small-6 columns">
<input type="text" id="searchBar" ng-style="{'width': '50%'}">
</div>
<!--empty -->
<div class="large-3 small-3 columns">
</div>
</div>
</div>
</div>
</div>
Adding on to #Marko's response, you are using Angular to style an attribute, but the styles you are providing are just static. Angular's ng-style attribute is intended to be used when you have dynamic styles that you want to apply at runtime based on a given condition. You aren't doing that. You're simply providing static styles that you want to be applied, inline. That's not really considered a best practice. It would be better to just use a static css stylesheet to do what you want.
That being said, the issue you're facing is purely a CSS one, not an angular-specific one. You just need to debug your style on your #backgroundImage div and you'll eliminate a lot of the complexity involved in using ng-style.
Here's a good tutorial on using full-page css background images: http://css-tricks.com/perfect-full-page-background-image/
I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>
just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily