How to create a scrolling button - javascript

I have code where the primary function is when a tab is clicked. The tab will highlight and move to that section of the code. The Character tab works and the About tab just takes me to the top of the page so I don't know for sure if that's working. However the Contact Us tab and the Battle Drives tab is complete wrong. The contact us tab takes me to the battle drive tab and the Battle Drive tab takes me below it. I want to create a function where when a tab is pressed it takes exactly to that specific element/section. Would it make more sense to add the id's to a specific element where it's being used instead of just adding to a div element.
const makeNavLinksSmooth = () => {
const navLinks = document.querySelectorAll('.nav-tab'); // add the name of the class you want to highlight when section appears
// this for loop checks all the elemnts which have class '.nav-tab' and adds a click event to it so it can scroll to that section
for (let n in navLinks) {
if (navLinks.hasOwnProperty(n)) {
navLinks[n].addEventListener('click', e => {
e.preventDefault();
document.querySelector(navLinks[n].hash)
.scrollIntoView({
behavior: "smooth"
});
});
}
}
}
const spyScrolling = () => {
const sections = document.querySelectorAll('.panel'); // a common name give to each section to identify them
// on scroll will highligh the nav item when reaches to the specific section
window.onscroll = () => {
const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
for (let s in sections) {
console.log(scrollPos, sections[s].offsetTop)
if (sections.hasOwnProperty(s) && sections[s].offsetTop <= scrollPos + 100) {
const id = sections[s].id;
document.querySelector('.active').classList.remove('active');
document.querySelector(`a[href*=${ id }]`).parentNode.classList.add('active');
}
}
}
}
makeNavLinksSmooth();
spyScrolling();
<body class="scroll-area" data-spy="scroll" data-offset="0">
<header class="section">
<!-- container -->
<div class="">
<div class="col-xs-3">
<img src="images/ShoeJackCityLogo.png" class="img logo">
</div>
<nav id="site-nav">
<ul class="group">
<li>Twitter</li>
<li><a class="nav-tab" href="#characters">Characters</a></li>
<li><a class="nav-tab" href="#battle_drives">Battle Drives</a></li>
<li class="active"><a class="nav-tab" href="#about">About</a></li>
<li><a class="nav-tab" href="#follow_us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<div class="content-area group section">
<!-- container -->
<div class="container panel" id="about">
<!-- row -->
<div class="Title">
<h1>ShoeJackCity</h1>
<p>SJC is a mobile game where you can buy, sell, and play in a compettive 11v1 fighting tournament against real users to win sneakers.</p>
</div>
<div class="row">
<div class="col col-sm-8 col-lg-8">
<div class="game-play">
<video controls>
<source src="videos/RPReplay_Final1595357560.MP4" type="video/MP4">
</video>
</div>
</div>
<div class="col col-sm-4 col-lg-4">
<h3>About</h3>
<p>Shoe Jack City is a first of its kind mobile gaming resell app that allows players to buy,sell, and compete for rare, high-end sneakers in a tournament style battle royale.</p>
<p>Inspired by the MegaMan Battle Network Series, players can choose thier Anomalies, collect battle drives to unleash powerful attacks and hidden abilities.</p>
<p>Buy and/or sell sneakers, and Dominate your way against friends and compete in 1v1 tournament battle royale to win top tier sneakers and reduce your sellers transaction fee!</p>
</div>
</div>
</div>
<!-- container -->
<div class="container panel" id="follow_us">
<!-- row -->
<h1 class="m-2">Follow us/Contact Us</h1>
<!-- row -->
<div class="row">
<!-- col -->
<div class="col col-sm-8">
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-twitter">
<p>Twitter</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-insta">
<p>Instagram</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-facebook">
<p>Facebook</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
</div>
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<form>
<div class="box-b">
<input id="email" class="email-input" type="email" name="email" placeholder="Email">
</div>
<input type="submit" value="Subscribe" class="subscribe-button">
</form>
</div>
</div>
</div>
<div class="container panel" id="battle_drives">
<!-- row -->
<div class="row">
<!-- col -->
<h2>Battle Drives</h2>
<div class=" push-down-sm">
<!-- row -->
<div class="row">
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Slices 1 enemy directly Slices 1 enemy directly Slices 1 enemy directly ahead. Range is 2 spaces, 80dmg, 40MB, LVL 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>AreaAdvance: Steals up to the first 4 available spaces. MB: 200, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
</div>
<!-- /row -->
<!-- row -->
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<!-- /container -->
<!-- container -->
</div>
<div class="container p-2 panel" id="characters">
<div class="row">
<h2 class="">Characters</h2>
<!-- col -->
<div class="col col-xs-6">
<img class="postion" src="images/Marbelle_ingame_concept.png">
</div>
<!-- /col -->
<!-- col -->
<div class="col col-xs-6">
<img class="postion" src="images/Ade_ingame_concept.png">
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<footer>
<p>© 2014 - This is the footer.</p>
</footer>
</body>


<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 3000px;
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
</style>
</head>
<body>
<h1>Change Background Gradient on Scroll</h1>
<h2>Linear Gradient - Top to Bottom</h2>
<p>This linear gradient starts at the top. It starts green, transitioning to blue.</p>
<h2 style="position:fixed;">Scroll to see the effect.</h2>
</body>
</html>
for more information follow this link
https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

Related

printing html sections in separate pages not working

i have an html page whose values are displayed through php, the section starts like below:
#media print {
body * {
visibility: hidden;
}
.section-to-print,
.section-to-print * {
visibility: visible;
}
.section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
#media print {
section {
page-break-after: always !important;
}
}
<section class="section-to-print" style="margin-left:15%">
<div class="container">
<div id="discs" class="container bootdey " style="padding-bottom:50px">
<div class="row invoice row-printable ">
<div class="col-md-10">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain border" style="padding-left:10px; padding-right:10px" id="dash_0">
<!-- Start .panel -->
<div class="panel-body p30">
<div class="row">
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
</div>
</div>
</section>
<section class="section-to-print" style="margin-left:15%">
<div class="container">
<div id="discs" class="container bootdey " style="padding-bottom:50px">
<div class="row invoice row-printable ">
<div class="col-md-10">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain border" style="padding-left:10px; padding-right:10px" id="dash_0">
<!-- Start .panel -->
<div class="panel-body p30">
<div class="row">
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
</div>
</div>
</section>
<section class="section-to-print" style="margin-left:15%">
<div class="container">
<div id="discs" class="container bootdey " style="padding-bottom:50px">
<div class="row invoice row-printable ">
<div class="col-md-10">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain border" style="padding-left:10px; padding-right:10px" id="dash_0">
<!-- Start .panel -->
<div class="panel-body p30">
<div class="row">
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
</div>
</div>
</section>
there are like 6 sections in the page, so when i click the print button am getting 2 sections in each page however i want one section only in a page, i did the following css:
this is still giving me 2 sections in a page, can anyone please tell me how to fix it, thanks

Use foreach loop for sections
example
foreach for array
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
?>
Provide more information for better solution

My responsive UI isn't responsive in bootstrap

I created a responsive Ui in bootstrap but my layout isn't responsive at all.
I can live with the desktop version, but it looks terrible on mobile and tablet.
How can i fix this?
and what exactly is the reason my layout behaves like that on smaller devices?
you can find a live version here:
uncovered-muscle.surge.sh
Or take a look here for the code if you don't like clicking links
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark indigo">
<a class="navbar-brand" href="#">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">exchange
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How To</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item avatar">
<a class="nav-link p-0" href="#">
<img src="#" class="rounded-circle z-depth-0"
alt="avatar image" height="35">
</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar -->
<div class="container">
<div class="jumbotron card card-image" style="background-color:black;opacity: 0.8;">
<div class="text-white text-center py-5 px-4">
<div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title" style="color:black;">Contract Balance</h5>
<p class="card-text">
<input class="form-control form-control-lg" type="text" placeholder="AGI" id="contractBalanceAgi"><br>
<input class="form-control form-control-lg" type="text" placeholder="SNET" id ="contractBalanceSnet"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="background-color:black;opacity:0.8;" >
<h1 style="text-align:center;color:white;">Invest</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1 AGI</h2>
<br>
<h3>0.00000</h3>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount of AGI</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI available</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your purchase</p>
<!-- Button -->
Approve
<br>
<br>
Mint
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.6;">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text" style="color:white;">Note: 10% entry fees, 10% exit fees, 2% referral fees, 2% dev fees.The sell fee will
only be distributed if you actually sell your tokens. The number of tokens you will receive for your AGI does not include the fees, it's an estimate.</p>
</div>
</div><!-- end of card -->
<br>
<div class="container">
<div class="row">
<div class="col" >
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i> Your Holdings</h5>
<h3 class="card-title pt-2"><strong><h2 class="card-text"><img src="images/agi.png" class="rounded" style="width:15%">1.1 AGI</h2></strong></h3>
<h3 class="card-title pt-2"><strong>AGI VaLue</strong></h3>
<p>AGI</p>
<div class="row" >
<div class="col-sm-6" >AGI</div>
<div class="col-sm-6" >$ 0.13</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
<div class="col">.col</div>
<div class="col">
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
<h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
<div class="row">
<div class="col-sm-6">
<h3>Option 1</h3>
<p>SNET</p>
<button type="button" class="btn btn-primary" id="reinvest">REINVEST</button>
</div>
<div class="col-sm-6">
<h3>Option 2</h3>
<p>AGI</p>
<button type="button" class="btn btn-primary" id="withdraw">WITHDRAW</button>
</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.8;text-align:center;">
<div class="card-body">
<h5 class="card-title">Masternode</h5>
<p class="card-text" style="color:white;" id="masternode">http://snetsaving.com</p>
</div>
</div><!-- end of card -->
<br>
<div class="container" style="background-color:black;opacity:0.8;">
<h1 style="text-align:center; color:white;">Exchange</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1.1 AGI</h2>
<br>
<h3>0.00000 USD</h3>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount to exchange</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>SNET available</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your exchange</p>
<!-- Button -->
<br>
<br>
Exchange
<br>
<br>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
SNETSAVING.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
</html>
I'm using bootstrap for the layout

This is because you're missing the meta tag viewport within your document. I highly recommend you check out the Bootstrap Starter Template, if you haven't already. Adding the following just below <meta charset="utf-8"> should do the trick:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
For more information on the viewport tag you can, for example, check out the article on Using the viewport meta tag to control layout on mobile browsers from MDN web docs. Basically, it ensures that the actual device width will be used for any media queries that e.g. Bootstrap uses for laying out columns. Otherwise, a larger virtual width will be used to ensure compatibility with older sites.

Offseting the content in Angular

Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?

Javascript hiding banner slider

How can i hide a image slider using javascript? i want show this banner in first loading and want to hide this banner with a button or "a" tag. if a visitor dont want to see the banner again they can hide the banner.
here my code
<div class="bootslider" id="bootslider">
<!-- Bootslider Loader -->
<div class="bs-loader">
<img src="img/loader.gif" width="31" height="31" alt="Loading.." id="loader" />
</div>
<div class="bs-container">
<!-- Bootslider Slide -->
<div class="bs-slide active" data-animate-in="swing" data-animate-out="magic">
<div class="bs-foreground">
<div class="text-center text-white" data-x="420" data-y="144" data-speed="400" data-animate-in="fadeInDown" data-delay="400">
<h1 class="banner_text1">TEXT<br>
MINING <br>
ENGINE</h1>
<p class="hidden-xs banner_text2">
TEXT SENTIMENTAL ANALYSIS
</p>
</div>
<div class="text-center">
<div class="text-center" style="position:absolute; width:43.75%; margin-left:28.125%;">
<img class="banner_img_imac" style="z-index:0" data-animate-in="fadeInDown" data-delay="800" src="img/template-product-1-imac.png" alt="iMac" class="image-layer" />
</div>
</div>
</div>
<div class="bs-background">
<img src="img/template-product-1.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
</div>
<!-- Bootslider Progress -->
<div class="bs-progress progress">
<div class="progress-bar wet-ashpalt"></div>
</div>
<!-- /Bootslider Progress -->
<!-- Bootslider Thumbnails -->
<div class="bs-thumbnails text-center text-wet-ashpalt">
<ul class=""></ul>
</div>
<!-- /Bootslider Thumbnails -->
<!-- Bootslider Pagination -->
<div class="bs-pagination text-center text-wet-ashpalt">
<ul class="list-inline"></ul>
</div>
<!-- /Bootslider Pagination -->
<!-- Bootslider Controls -->
<div class="text-center">
<div class="bs-controls">
<img src="images/arrow_left.png">
<img src="images/arrow_rit.png">
</div>
</div>
<!-- /Bootslider Controls -->
</div>

please search stackoverflow before
guess you were looking for THIS
of course if you want to hide it permenetly you have to add some to a DB
otherwise it will appear everytime as long the session is refreshed :)

Transition text of a div by clicking an image

VERY new to js but here it goes.
I want to be able to click on one of the images in the Portfolio section and have it change the text of the h3 in the Text section with a fade transition as well as select the corresponding slide in the slider.
Code:
<!-- 960 Container -->
<div class="container">
<!-- Description -->
<div class="sixteen columns">
<!-- Text -->
<h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>
<div class="flexslider">
<ul class="slides">
<li>
<div id="details">Tier-1 Tech Support</div>
</li>
<li>
<div id="details">Off-site Backups</div>
</li>
<li>
<div id="details">Loaner Computer</div>
</li>
</ul>
</div>
</div><!-- End Description-->
<!-- Portfolio Content -->
<div id="portfolio-wrapper">
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Tier-1 Tech Support</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Off-site Backups</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Loaner Computer</h4>
</div>
</div>
</div><!-- End Portfolio Content -->
</div><!-- End 960 Container -->

all you need is plane javascript or for lesser code, jquery.
just place your img and your div in the markup and bind the click event of the img to function in which you toggle your division display
you can have multiple images, referring to multiple containers(or same containers), which are hidden by default, but as you click on the relative image, it would appear.
see the code below
create your markup like:
<div class="wrapper">
<div class="image">
<img src='../images/actions_button_ok.png' data-target="one" />
<img src='../images/actions_button_ok.png' data-target="two" />
<img src='../images/actions_button_ok.png' data-target="three" />
</div>
<div class="target" id="one" >
this is text A
</div>
<div class="target" id="two" >
this is text B
</div>
<div class="target" id="three" >
this is text C
</div>
</div>
and your jquery code as:
$(document).ready(function(){
$('img').on("click",function(){
$('.target').hide();
$('#'+$(this).data('target')).toggle(1000);
});
});
basically, your html structure can be of your choice, but that's how you should go about it.
explore more about jquery.
see this fiddle.
instead of binding click to img, you can bind it to your li aswell.

Categories

Resources