i have a website that use this template https://ld-wp.template-help.com/wordpress_63613/ and the problem is in the previous link .. the news div is loading about 30 to 60 seconds late than all the page contents .. you just can browse the link and view the problem
i will attach screen shots
i see that the template uses swiper plugin from * http://www.idangero.us/swiper/
i tried to download the original css and js files but i does not work
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-10-27T10:21:25+00:00">October 27, 2016</time>
</div>
<div class="post-meta post-comments">3 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-3-390x303.jpg" alt="Bedayia School Celebrates 100 days with their Students" width="390" height="303">
</div>
<h5 class="entry-title">Bedayia School Celebrates 100 days with their Students</h5>
</header>
<article class="entry-content">
<p>Gr 1 & 2 students during the Speak up campaign ceremony & Student Honor roll Gr 1 & 2 students during the Speak up campaign ceremony & Student Honor roll</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-10-19T10:20:30+00:00">October 19, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-6-390x303.jpg" alt="Bedaya School added 33 new photos to the album: Animal Show." width="390" height="303">
</div>
<h5 class="entry-title">Bedaya School added 33 new photos to the album: Animal Show.</h5>
</header>
<article class="entry-content">
<p>In BIS we focus on representing the new concepts by practicing real life experiences that help the students to make connections between the world and their studies .</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-10-03T10:16:05+00:00">October 3, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-7-390x303.jpg" alt="LU's commencement 2016" width="390" height="303">
</div>
<h5 class="entry-title">Bedaya School's commencement 2016</h5>
</header>
<article class="entry-content">
<p>This year the commencement at the Bedayia School has been the biggest in its…</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-09-22T10:13:29+00:00">September 22, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-10-390x303.jpg" alt="Professor Kenobi at the Yale Conference 2016" width="390" height="303">
</div>
<h5 class="entry-title">Professor Kenobi at the Yale Conference 2016</h5>
</header>
<article class="entry-content">
<p>This spring the Bedaya School’s professor and the SPS business school dean Michelle Kenobi visited…</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-09-15T10:11:21+00:00">September 15, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-9-390x303.jpg" alt="Law school expansion" width="390" height="303">
</div>
<h5 class="entry-title">Law school expansion</h5>
</header>
<article class="entry-content">
<p>As the submission process for this year has already wrapped up, we can see…</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"><i class="linearicon linearicon-chevron-left"></i></div>
<div class="swiper-button-next"><i class="linearicon linearicon-chevron-right"></i></div>
</div>
when it first loaded it becomes like this for 30 to 60 seconds depending on network speed
then it loads but after a long time of white space on the design
No space between attributes.
JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
Related
I want to put an image to the right of my text in Vue with Buefy. Here is my code so far. Could anyone help me?
<template>
<section class="hero is-link is-fullheight-with-navbar">
<div class="hero-body">
<div class="container is-max-desktop">
<div class="columns is-vcentered is-variable">
<div class="column">
<p class="title">
Let your creativity go wild
</p>
<p class="subtitle">
Kaplash is your go-to tool to help make your coding and blocky dreams come true.
</p>
<b-image
src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
ratio="16by9"
#load="onLoad1"
></b-image>
</div>
</div>
</div>
</div>
</section>
</template
You just need to add an extra <div> as a wrapper for your image as the code below:
<template>
<section class="hero is-link is-fullheight-with-navbar">
<div class="hero-body">
<div class="container is-max-desktop">
<div class="columns is-vcentered is-variable">
<div class="column">
<p class="title">
Let your creativity go wild
</p>
<p class="subtitle">
Kaplash is your go-to tool to help make your coding and blocky dreams come true.
</p>
</div>
<!-- This is the div that I added -->
<div class="column">
<b-image
src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
ratio="16by9"
></b-image>
</div>
</div>
</div>
</div>
</section>
</template>
I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
Explore More
</div>
</div>
<div id="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-right p-0 ">
<div class="right-block">
<div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....
<section>
<div class="container">
<div clss="row">
<!-- Carousel from GetBootstrap.com Version 5 -->
</div>
</div>
</section>
Now I'm having trouble finding out how to get a list-group working. I want a panel on the left side, using col-lg-9. On the right side there's a selection menu, using col-lg-3.
I wan't this selection menu to dynamically change the content of the page. So when I click on item 1, the panel provides info that is meant to be for item 1.
So far I've come to this, but this doesn't work yet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-lg-9'>
<div class='panel panel-default' id='panel1'>
<div class='panel-body'>
<div class='page-header'>
<h3>The first panel <small>Posted on december 23 2015</small></h3>
</div>
<img class='featuredImg' src='resources/screenshot1.png'>
<p>Another paragraph</p>
<h4>This is a header</h4>
<p>Paragraph to match this header</p>
</div>
</div>
<div class='panel panel-default' id='panel2'>
<div class='panel-body'>
<div class='page-header'>
<h3>This is panel two <small>Posted on december 24 2015</small></h3>
</div>
<p>This is a paragraph for panel two</p>
<h4>This is a sub header for panel two</h4>
<p>This is content belonging to subheading of panel two</p>
</div>
</div>
</div>
<div class='col-lg-3'>
<div class='list-group'>
<a href='#panel1' class='list-group-item active' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 1</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
<a href='#panel2' class='list-group-item' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 2</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</div>
</div>
</div>
</div>
If I understand you correctly, you need to combine that tabs and the item-list components.
Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-lg-9 tab-content'>
<div class='panel panel-default tab-pane active' id='panel1'>
<div class='panel-body'>
<div class='page-header'>
<h3>The first panel <small>Posted on december 23 2015</small></h3>
</div>
<img class='featuredImg' src='resources/screenshot1.png'>
<p>Another paragraph</p>
<h4>This is a header</h4>
<p>Paragraph to match this header</p>
</div>
</div>
<div class='panel panel-default tab-pane' id='panel2'>
<div class='panel-body'>
<div class='page-header'>
<h3>This is panel two <small>Posted on december 24 2015</small></h3>
</div>
<p>This is a paragraph for panel two</p>
<h4>This is a sub header for panel two</h4>
<p>This is content belonging to subheading of panel two</p>
</div>
</div>
</div>
<div class='col-lg-3'>
<ul class='list-group'>
<li class="list-group-item active">
<a href='#panel1' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 1</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</li>
<li class="list-group-item">
<a href='#panel2' data-toggle='tab'>
<h4 class='list-group-item-heading'>Item 2</h4>
<p class='list-group-item-text'>Short info about the item</p>
</a>
</li>
</ul>
</div>
</div>
</div>
I want to make a button or link, that, when clicked will display the next two div (articles) that I have stored in the index. Kind of like the infinite scroll tumblr effect. This as close as I could get. Either doesn't display any of the divs, or displays all of them.
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on September 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on September 18, 2014</p>
</div>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on August 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on July 8, 2014</p>
</div>
<hr>
</div>
</div>
</div>
I have a css file that stores:
.post-preview { display:none; }
and this is the script that I run on the page:
<script>
$(function(){
$(".post-preview").slice(0, 2).show(); // select the first two
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$(".post-preview:hidden").slice(0, 2).show(); // select next two hidden divs and show them
});
});
</script>
the content is correct - the JQuery library was not loaded.
I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .
Currently both divs can be expanded at the same time.
The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.
Is there an easy way to do this?
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a href="#" data-target="#about" data-toggle="collapse">
<div class="unit red bloat">
<h3>About</h3>
<p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>
</div>
</a>
</div>
<div class="span4">
<a href="#" data-target="#videos" data-toggle="collapse">
<div class="unit red bloat">
<h3>Videos</h3>
<p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>
</div>
</a>
</div>
<div class="span4">
<a href="forums/index.php">
<div class="unit grey bloat">
<h3>Forum</h3>
<p>If you think you'd fit in here, click this box and sign up to our forum. </p>
</div>
</a>
</div>
</div><!-- end row -->
<br />
<br />
<div class="row-fluid">
<div class="span12">
<!-- start accord -->
<div id="about" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>about</p>
</div>
</div>
</div>
<div id="videos" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>vid</p>
</div>
</div>
</div>
<!-- end accord -->
</div>
</div>
<hr><!-- Bottom border -->
</div> <!-- /container -->
I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.
Here is the working example;
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="unit grey bloat">
<h3>Heading 1</h3>
<p>Paragraph 1</p>
</div>
</a>
</div>
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="unit grey bloat">
<h3>Heading 2</h3>
<p>Paragraph 2</p>
</div>
</a>
</div>
<div class="span4">
<a href="#">
<div class="unit grey bloat">
<h3>Heading 3</h3>
<p>Paragraph 3</p>
</div>
</a>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 1</p>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->