Here's my gallery tab that i want to have a jquery photo gallery or slide. I already downloaded a jquery photo gallery script but my big trouble is i don't know where to put the code on the page. Please help me.
Here's my gallery.asp code: (Please tell me where to put the photo gallery jquery code)
<% intSectionId = 103 %>
<!--#include file ="include/inc_header.asp"-->
<!--#include file ="include/functions_default.asp"-->
<body>
<div id="art-page-background-gradient"></div>
<div id="art-main">
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<div class="art-Sheet-body">
<!-- start header2 section -->
<!--#include file ="include/inc_header2.asp"-->
<!-- end header2 section -->
<!-- start navigation section -->
<!--#include file ="include/inc_navigation.asp"-->
<!-- end navigation section -->
<!-- start main content section -->
<div class="art-contentLayout">
<div class="art-content">
<div class="art-Post">
<div class="art-Post-body">
<!-- start inner content section -->
<div class="art-Post-inner">
<h2 class="art-PostHeader">
Gallery</h2>
<div class="art-PostContent">
<div style="float:right;margin:0px 5px 5px 5px"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div style="padding:0px 60px 0px 60px;">
<p> </p>
</div>
<div style="padding:0px 60px 0px 60px;">
<p align="right"> </p>
</div>
</div>
<div class="cleared"></div>
<!-- end inner content section -->
</div>
<div class="cleared"></div>
</div>
</div>
</div>
<!-- end main content section -->
<!-- start sidebar section -->
<!--#include file ="include/inc_sidebar.asp"-->
<!-- end sidebar section -->
<!-- start footer section -->
<!--#include file ="include/inc_footer.asp"-->
<!-- end footer section -->
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
<p class="art-page-footer"></p>
</div>
</body>
Have you used jcarousal sorgalla.com/jcarousel see the examples you will get your answer
it depends on your css, and on the particular jquery widget, but i think you should try right after:
<div class="art-PostContent">
Related
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 have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time.
The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.
There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.
The Difference?
This one gets each product detail form Business Catalyst module rendered as:
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
the id is different for each product of course.
Here is link if you want to View page source - starts on LINE 289
Link to product parent detail page
To see the module result - Here is some code from ONE product inside the owl-carousel
What can I add to this to make each block of product detail render horizontal?
<section class="section wow fadeInUp">
<h3 class="section-title">Accessories and Related Products</h3>
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
<div class="item item-carousel">
<div class="products">
<div class="product">
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
<!-- product detail -->
<div class="product-image">
<div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
<!-- /.image -->
</div>
<!-- /.product-image -->
<div class="product-info text-left">
<h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
<div class="description"></div>
<div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
<!-- /.product-price -->
</div>
<!-- /.product-info -->
<div class="cart clearfix animate-effect">
<div class="action">
<h4>
<div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
</h4>
</div>
<!-- /.action -->
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>
<!--/ END product detail -->
</li></ul> </div>
<!-- /.product -->
</div>
<!-- /.products -->
</div>
<!-- /.item item carousel -->
</div>
<!-- /.home-owl-carousel -->
</section>
<!-- /.section -->
Hope this is better to understand?
Thank You
Willz
Problem solved
The trouble was with the Business Catalyst Module productfeaturelist
- here is the module as edited to function correctly in owl-carousel:
{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"}
{% comment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endcomment %}
Try Using:
display: inline-block;
Also have a look Here for tips on creating a grid.
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?
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 :)
Hello I am developing a jQuery mobile app and Here is the situation
<script>
function showPanel(info) {
alert(info.id);
alert($(info).next()[0].id);
}
</script>
<div data-role="footer" id="footer_button" onclick="showPanel(this);">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<div id="footerhigher1">
<div id="footerinner1"></div>
</div>
Now in this code onclick event of the first div I am passing this from which I am extracting the id of the first div and by the next() mothod of jQuery I am fetching the ID of the next div. Now I also want to get the id of the child whose ID is footerinner1 So how can I take that ID
I have multiple combination like these in single page
more Explicit View
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer" id="footer_button1">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher1" class="higher">
<div id="footerinner-1-1" class="inner"></div>
<div id="footerinner-1-2" class="inner"></div>
</div>
</div>
<!-- /page -->
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer" id="footer_button2">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher2" class="higher">
<div id="footerinner-2-1" class="inner"></div>
<div id="footerinner-2-2" class="inner"></div>
</div>
</div>
<!-- /page -->
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer" id="footer_button3">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher3" class="higher">
<div id="footerinner-3-1" class="inner"></div>
</div>
</body>
</html>
You asked how to do it with jquery-style event handling:
$('#footer_button').on('click', function() {
var $this = $(this);
alert($this.attr('id');
// traversing the dom etc.
});
Also updated html:
<div data-role="footer" id="footer_button">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher1" class="higher">
<div id="footerinner1" class="inner"></div>
</div>
try this
alert($(info).next().children('div').attr('id'));
May this work :
alert($(info).next().children().eq[0].id);