I'm currently working on a little project which involves a table with pictures in. Currently the table is there and I have pagination numbers on the page, but they currently don't do anything.
Here's the code I have for my table:
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
</a>
</div>
</div>
here's the code I have for the pagination numbers:
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
</div>
When the user clicks on the next page, id like another table to appear but of course separate from the table on the first page. I know I can link the pagination externally, but how do I do it internally so the page doesn't reload when the user clicks the button?
Thanks in advance
Related
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/000000/fff">
<img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/0000ff/fff">
<img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/00ff00/fff">
<img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/ff0000/fff">
<img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
</li>
</ul>
</div>
What combinator selects each img with a class "box-img" in order to replace each with another?
#about .box-img:nth-child(1){
background-image: url(../img/img-1.jpg);}
But it doesn't work.
Could it be the resolution of the images? The original ones are 250 × 250 and the ones I want to replace with are 600 × 400.
Is there a way to replace each image using only CSS?
You should just use JavaScript to update the src attribute instead. Here a short script that will change all images to another after two seconds.
window.addEventListener("DOMContentLoaded", (e) => {
const imgs = document.querySelectorAll("#about .box-img:nth-child(1)");
const newImage = "https://dummyimage.com/100x100/ff00ff/000000&text=Changed"
// set image to another one after two seconds
setTimeout(() => {
imgs.forEach(img => img.setAttribute("src", newImage))
}, 2000)
});
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/000000/fff">
<img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/0000ff/fff">
<img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/00ff00/fff">
<img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/ff0000/fff">
<img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
</li>
</ul>
</div>
As you can see different image sizes do not hinder you from doing this. You could obviously adjust the logic to do more complicated (yet simple) stuff than replacing all images with the same image but the principle remains the same.
I have searched every thread in the forums, and not be able to resolve my issue. I mostly believe this is because I am new to coding and perhaps don't understand it properly yet.
please help page two below is the one with this issue. The side nav does not work it does not open on the page with the code below. and also it does not close when you click back on the page.
<body>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
index page where there is no issue but I have crossed checked both codes and can't find anything different. The only issue I have is that it remains open unless you click a link and I would like it to close if you click back on the page.
<body>
<!-- Header -->
<header class="main-header">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="#About">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="#About">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
thank you for your help.
UPDATE: sideNav works in codepen.io/Bjorn_Ironside1986/pen/VRbyvL but doesn't work in codepen.io/Bjorn_Ironside1986/pen/OqmOdR
these 2 are required to see codepen working
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I think it's because you never close your header tag.
You need some javascript to initialize the sidenav - in the code below, i just added the options for the side nave to open from the left... Click on the Menu button on the left.
Hope it works for you.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'left'
});
});
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
</a>
</div>
<!-- Showcase -->
<div class="showcase container">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<h1>The Digital World</h1>
<h5>Solutions</h5>
</div>
</div>
</div>
</header>
<!-- Section: Solutions About -->
<section class="section section-solutions-about">
<div class="container">
<div class="row">
<div class="col s12 m5">
<h2>What We Do...</h2>
<p>Solutions are ways of solving problems, when you consider world issues today, everything boils down to Langauge, Maths, Technology and Science! If you consider what these represent, in one view that could be taken if we break them down it is merely
code in some form, structed together to create innovation.</p>
</div>
<div class="col s12 m6 offset-m1">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">
Web Devlopment
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Features -->
<section class="section section-features grey lighten-3">
<div class="container center">
<h4>
<span class="deep-purple-text text-darken-1 center">Powerful</span> & Innovative</h4>
<h6 class="grey-text text-darken-2 center">We aim to assist you, and provide quality of service to help you scale your business, capture new clients and retain existing customers with our desings!</h6>
<br>
<br>
<!-- Row 1 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-user"></i> User Friendly Applications
</h5>
<p>As a business the focus is on the client and the user to generate interest or purchase of services and products. We focus on functionality and accessability at the forefront of every desgin to ensure the user maintains interest. We ask you to
provide the information needed to explain your product or service which will allow the user to make an informed choice.</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-database"></i> Security of user and client Data
</h5>
<p>In today's society information is the new form of gold. We can advise you on policys such as EU GDPR and UK data protection laws. Depedning on your wesbites structure we will inform you of any products which may be of benfit to prevent cyber crime.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-chart-line"></i> Data Analytics
</h5>
<p>
Data helps devlope a business it can show growing trends or point out possible issues. With this information a business can takes steps to proctect both themsleves and their client but also it can assist them in devloping growth and expanding into new
sectors. We can advise on tools which can be helpful to your business in relation gathering data from users.</p>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-github"></i> Problem Solving
</h5>
<p>
Programing is not for everyone, that is why their are expereinced devlopers who offer services such a repair or managing sites. We can offer sulutions to problems with your site should the need arise. In some circumstances we may offer to manage your
site for a fee, this can be discussed further dpending your needs.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-plus"></i> Add-ons
</h5>
<p>Our main service is devlopment, we dont offer hosting services or provide domain names. We can put you in touch with some providers, depending on your business services. We dont offer graphic design. We source images which are free of royalty
and are licenced for commecial use to prevent any legal or copyright issues. But sometimes we have to use images from sources such as adobe stock therefore these are not free and will be added to the final invoice. </p>
</div>
<div class="col s12 m4">
<h5>
<i class="fas fa-desktop"></i> Website Design
</h5>
<p> We can offer a range of services in relation to desgin and devlopment. We can do "Landing Page" Mulitiple Page Design, One page design with different sections and E-commerce sites with a database. We can also build custome designs, all our projects
take time depending on complexity and nature of the project.</p>
</div>
</div>
<div class="center">
<h5>
<span class="deep-purple-text text-lighten-1">Have a question? </span> Contact our sales team
</h5>
<p>sales#lueurtech.co.uk</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="page-footer black lighten-1">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Us</h5>
<p class="grey-text text-lighten-4">Our company name "Lueur" is a french word which translates to "Glow" the more common use of the word is "lueur d'espoir" which means "Glimmer of Hope" it is in this meaning that our business looks to offer small business the chance to glow. We
take into consideration that everyone just wants to succeed in life and in business so our mission of course is to make a stable business but the main prespective is to give hope and help people grow!</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li>
<a class="grey-text text-lighten-3 " href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="index.html">About us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright deep-purple darken-1">
<div class="container">
<div> Lueur Tech © 2018</div><i class="fab fa-cc-paypal fa-3x grey-text text-lighten-3"></i>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-3x grey-text text-lighten-3"></i></a>
<p class="grey-text text-lighten-4 right " href="#!"> Terms | Legal | Privacy</p>
</div>
</footer>
Basically, I have a site that has a sticky header and sidebar nav but when the screen is made smaller, the menu adopts a hamburger button that can expand the collapsible sidebar.
This works as expected except for one thing: The inclusion of the bootstrap CSS cdn.
So If I comment out the CDN for the bootstrap CSS it works correctly, but If I include it and make the screen mobile size, upon hitting the menu button, the menu expands under the main content cards in the main div. If I comment it out, the menu expands on top of the cards as it should.
IN my codepen above, it has the bootstrap CDN to show the error. I have a custom CSS which is also attached there and I have a lot of styling there, I'm just wondering how I can get this fixed and still have the bootstrap CSS for other stying.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src=""/>
</div>
<div class="page-details"></div>
<div class="settings">
<div class="menu-button profile">
<i class="material-icons">person</i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src=""/>
</div>
<ul>
<li>
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">adb</i>
<span>Menu Item with a Long Name</span></a></li>
<li>
<a href="#">
<i class="material-icons">android</i>
<span>Android</span></a></li>
<li>
<a href="#">
<i class="material-icons">attachment</i>
<span>Attachments</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">bookmark</i>
<span>Bookmarks</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">star</i>
<span>Favorites</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i>
<span>Configuration</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">cake</i>
<span>Birthday Party</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">brush</i>
<span>Designer</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">camera</i>
<span>Photos</span>
</a>
</li>
</ul>
</nav>
<!--These are the cards that the menu expands underneath-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
nav.open {z-index: 1 !important};
Z-index will allow you to show the nav on top of other elements and the !important will help you overwrite the bootstrap css
Adding z-index: 9999; to the nav.open worked.
I have the following code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul id="controlsCar" class="entries nav nav-pills nav-justified">
<li data-target="#custom_carousel" data-slide-to="0">
<a href="#">
<span>
<img src="img1.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="1">
<a href="#">
<span>
<img src="img2.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle1</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="2">
<a href="#">
<span>
<img src="img3.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle3</div>
</span>
</a>
</li>
</ul>
</div>
</div>
it resizes perfectly on Safari and Chrome but I do not see any change in the image with using FireFox or IE.
Does it have to do with the SPAN TAG ? Any ideas?
Thanks
I have an unordered list of thumbnails that display in Safari 5.1.7 & Chrome 33.0.1750.152 but not Firefox 27. My site is www.zrrdigitalmedia.com . I'm using the latest version of Bootstrap 2. Here's the HTML
<h1 name="ads-section">ADS</h1>
<ul class="thumbnails">
<article class="row-fluid">
<li class="span4">
<a href="img/ads/expedia.jpg" data-lightbox="image-6" title="Expedia Ad for Filter" class="thumbnail">
<img alt="Expedia Ad for Filter" src="img/ads/expediaThumb.jpg">
<h3>Expedia Ad for Filter</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
<li class="span4">
<a href="img/ads/geek.jpg" data-lightbox="image-7" title="GeekWire Ad for Filter" class="thumbnail">
<img alt="GeekWire Ad for Filter" src="img/ads/geekThumb.jpg">
<h3>GeekWire Ad for Filter</h3>
<p>Designed in Photoshop & Maya.</p>
</a>
</li>
<li class="span4">
<a href="img/ads/inrix.jpg" data-lightbox="image-8" title="Inrix Ad for Filter" class="thumbnail">
<img alt="Inrix Ad for Filter" src="img/ads/inrixThumb.jpg">
<h3>Inrix Ad for Filter</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
</article>
<article class="row-fluid">
<li class="span4">
<a href="img/ads/micro.jpg" data-lightbox="image-9" title="Microsoft Ad for Filter" class="thumbnail">
<img alt="Microsoft Ad for Filter" src="img/ads/microThumb.jpg">
<h3>Microsoft Ad for Filter</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
<li class="span4">
<a href="img/ads/msn.jpg" data-lightbox="image-10" title="MSN Ad for Filter" class="thumbnail">
<img alt="MSN Ad for Filter" src="img/ads/msnThumb.jpg">
<h3>MSN Ad for Filter</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
<li class="span4">
<a href="img/ads/natgeo.jpg" data-lightbox="image-11" title="National Geographic Ad for Filter" class="thumbnail">
<img alt="National Geographic Ad for Filter" src="img/ads/natgeoThumb.jpg">
<h3>National Geographic Ad for Filter</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
</article>
<article class="row-fluid">
<li class="span4">
<a href="img/ads/aa1.jpg" data-lightbox="image-12" title="Amber-Allen Ad" class="thumbnail">
<img alt="Amber-Allen Ad" src="img/ads/aa1Thumb.jpg">
<h3>Amber-Allen Ad</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
<li class="span4">
<a href="img/ads/aa2.jpg" data-lightbox="image-13" title="Amber-Allen Ad" class="thumbnail">
<img alt="Amber-Allen Ad" src="img/ads/aa2Thumb.jpg">
<h3>Amber-Allen Ad</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
<li class="span4">
<a href="img/ads/dsf.jpg" data-lightbox="image-14" title="DSF Ad" class="thumbnail">
<img alt="DSF Ad" src="img/ads/dsfThumb.jpg">
<h3>DSF Ad</h3>
<p>Designed in Photoshop.</p>
</a>
</li>
</article>
</ul>
Why aren't the thumbnails & images showing up in Firefox 27? Thanks!
The answer to my problem: disable adblockplus in Firefox.