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
Related
I am using bootstrap grid system and wanted to add prefix number to each row which will basically shows the number to each row. list 1, 2, 3, 4. How can I achieve that?
Desired output:
1. content will appear here
2. content will appear here
3. content will appear here
4. content will appear here
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
.container.counter {
counter-reset: section;
}
.container.counter .row {
counter-increment: section;
}
.container.counter .col::before {
content: counter(section) ".";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container counter">
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
</div>
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
I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<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-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<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-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
I am told to make a shopping cart website using bootstrap with the images of products positioned in two rows and with three panels in each row
Although here i have coded for only one panel with the image within it,the main problem that I am facing is to adjust the position of panel which is always appearing on the top of the page.
I tried to enclose it in a div with id posi and then tried to position it using but it didn't work so please help.Further the image is appearing too big so what is the best method to re-size it so that the image responsiveness remains intact.I also have another question which is written in my code snippet(as a comment) if anybody knows the answer of that kindly help.
<!DOCTYPE HTML>
<html>
<head>
<title>
Web page
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
#posi
{
position=absolute;
top=100px;
right=50px;
}
</style>
</head>
<body>
<div id="posi">
<div class="container">
<div class="row" >
<div class="col-md-3 col-md-6" ><!--Although I have used this col-md-3 col-md-6 but I also want to know
what happens when we specify two column definitions in a single class like this-->
<div class="panel panel-default" >
<div class="panel-heading panel-primary">
Iphone 6
</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to set the position for top to take effect.
body,
html {
background: grey;
}
#wrapper {
top: 100px;
right: 50px;
position: absolute;
background: lightblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>