I'm using the plugin called Ascensor from http://kirkas.ch/ascensor
It's basically a tool that help me build a single page application.
However, I have a problem that I don't know how to solve.
All of my content will be listet inside my <div id="ascensorBuilding">
<div id="ascensorBuilding">
<div class="floor floor-1">
<span class="text">Floor 1</span>
</div>
<div class="floor floor-2">
<span class="text">Floor 2</span>
</div>
<div class="floor floor-3">
<span class="text">Floor 3</span>
</div>
<div class="floor floor-4">
<span class="text">Floor 4</span>
</div>
<div class="floor floor-5">
<span class="text">Floor 5</span>
</div>
<div class="floor floor-6">
<span class="text">Floor 6</span>
</div>
<div class="floor floor-7">
<span class="text">Floor 7</span>
</div>
</div>
And my floor links:
<nav>
<ul class="links-to-floor">
<li><a>Floor 1</a></li>
<li><a>Floor 2</a></li>
<li><a>Floor 3</a></li>
<li><a>Floor 4</a></li>
<li><a>Floor 5</a></li>
<li><a>Floor 6</a></li>
<li><a>Floor 7</a></li>
</ul>
</nav>
And I then use this script to change between the "pages"
var ascensor = $('#ascensorBuilding').ascensor({ascensorFloorName:["Home", "About", "HTML" , "Jquery" , "CSS", "Smartphone", "End"], direction: [[0,0],[0,1],[0,2],[1,0],[1,1],[1,2],[2,0]]});
var ascensorInstance = $('#ascensorBuilding').data('ascensor');
$(".links-to-floor li").click(function(event, index) {
ascensorInstance.scrollToFloor($(this).index());
});
$(".links-to-floor li:eq("+ ascensor.data("current-floor") +")").addClass("selected");
ascensor.on("scrollStart", function(event, floor){
$(".links-to-floor li").removeClass("selected");
$(".links-to-floor li:eq("+floor.to+")").addClass("selected");
});
As you can see I add a floorname to my url. So I will start on www.mysite.com/index.html#home and if I go to another page, it would be www.mysite.com/index.html#about for example.
And if I manually put www.mysite.com/index.html#about in the addressbar, I will also go to that specific page.
But my problem is that if I click around my floors, non of the pages are added to the browsers history. So if I decide to click on the browsers back button, I will go back the site I was on before entering my website.
How can I manage to add my click to the browsers history?
You can manipulate the Javascript history object yourself:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
Related
I want to summarize my HTML code and making a component by Javascript. My Html code contains a list of the picture that I put them in <li> tags. every picture has a special link, and a number into a <div> tag.how can I make a pattern for generating them by javascript?
Also, I want to sort these pics by that numbers, according to, highest to lowest, and I don't know how to do that. Totally, Is it true to summarize HTML code in this way?
<ul class="product-list">
<li class="product-item">
<a id="producItem1" href="page2.htm">
<img class="clothes" src="dress1.jpg">
</a>
<div class="price-holder">
<p id="price1">250,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem2">
<img class="clothes" src="coat1.jpg">
</a>
<div class="price-holder">
<p id="price2">350,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem3">
<img class="clothes" src="shirt1.jpg">
</a>
<div class="price-holder">
<p id="price3">150,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem4">
<img class="clothes" src="skirt1.jpg">
</a>
<div class="price-holder">
<p id="price4">200,000</p>
</div>
</li>
</ul>
use this if you want to create list from javascript data you can use objects but i used arrays because you said no server involved so you will generate the data of image names and prices manually
$(document).ready(function(){
imgz=['dress1.jpg', 'coat1.jpg', 'shirt1.jpg', 'skirt1.jpg','dress2.jpg'];
prices=[100000, 200000, 150000, 250000, 300000];
linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
//linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
imgz.map((z,i)=> $('body').append(`
<li class="product-item">
<a id="producItem${i+1}" href='${linkz[i]}'>
<img class="clothes" src="${imgz[i]}">
</a>
<div class="price-holder">
<p id="price${i+1}">${prices[i]}</p>
</div>
</li>`));
});
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script></head>
<body><ul class="product-list"></ul></body></html>
and if you want to create the links data automatically use this
linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
instead of linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
I am building the UI in react.js and want to improve my JSX /HTML code to be smaller.
At the moment my JSX code takes around 70 lines of code.
This is what I am building:
And my One of the problems is that in some sentences one or more words need to be bolder.
I would like to solve that in a better way than the below implemented code.
Please find below my code HTML / JSX:
<div className="search-help" ref={(node) => this.setWrapperRef(node)}>
<div className="search-help-content">
<div className="search-help-header">
<p>Use Specific Keywords for smarter filtering - English only</p>
</div>
<div className="search-help-sections">
<div className="search-help-left-content">
<p className="search-help-section-title">Logical Operator</p>
<ul className="search-help-list">
<li className="search-help-label-spacing">
<p className="search-help-label-main">
AND
<span className="search-help-label-sub">
"TX Group" <b>AND</b> "Latest News"
</span>
</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">
NOT
<span className="search-help-label-sub">
"Pochettino" <b>NOT</b> "Mourinho"
</span>
</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">
OR
<span className="search-help-label-sub">
"Cristobal Huet" <b>OR</b> "Nico Hischier"
</span>
</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">
( )
<span className="search-help-label-sub">
<b>(</b>"Jeff Bezos" <b>OR</b> "Bill Gates" <b>OR</b>
<b>(</b> "Jack Dorsey"<b>)</b> <b>AND</b> <b>(</b>"Climate Change"<b>)</b>
</span>
</p>
</li>
</ul>
</div>
<div className="search-help-right-content">
<p className="search-help-section-title">Language</p>
<ul className="search-help-list">
<li className="search-help-label-spacing">
<p className="search-help-label-main">lang:de</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">lang:eng</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">lang:fr</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Any advice or idea?
It seems extracting your <li> into a component might be a good start. Build a component, say, MyListItem and extract all repeating code there. Actual unique text will be passed there through props.
To pass different bits of text into different places you can use different props like so:
<li className="search-help-label-spacing">
<p className="search-help-label-main">
{this.props.binaryOperator}
<span className="search-help-label-sub">
"{this.props.string1}" <b>{this.props.binaryOperator}</b> "{this.props.string2}"
</span>
</p>
</li>
I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).
The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg
Thank you for your help.
My Javascript code
jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
href: link2;
}));
My HTML code
<div class="profile-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-pre>
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
data-width="1024"
data-height="576"
>
</a>
</div>
<div class="profile-name" v-pre>
<h1 class="case27-primary-text">Offer 2</h1>
<h2>blag</h2>
</div>
<div class="cover-details" v-pre>
<ul></ul>
</div>
<div class="profile-menu">
<ul role="tablist">
<li class="active">
<a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
role="tab" class="tab-reveal-switch toggle-tab-type-main">
Profile </a>
</li><li class="">
<a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
role="tab" class="tab-reveal-switch toggle-tab-type-comments">
Comments
<span class="items-counter">0</span>
</a>
</li> <div id="border-bottom"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery('.profile-avatar.open-photo-swipe')
This element is a link, not image:
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
So use
jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)
In a WordPress website, I want to configure a set of css buttons appear in a block. So that each post have a set of buttons. I was able to set them in inline-block. But the issue is that when I wrap them with a new class(via jquery) in order to center using display:block, the buttons belonging to other posts also appear in the recent posts.
Say, the recent post named - "mypost10" has the five buttons, other post buttons appear besides the five buttons if I wrap with main-class-wrap.
Here is the jquery to wrap and add classes:
jQuery(document).ready(function () {
jQuery(".sub").wrapAll("<span class='main-class-wrap' />");
jQuery(".sub-1").find('a').addClass('sub-sub-1 icon-magnifier');
jQuery(".sub-2").find('a').addClass('sub-sub-2 icon-tools');
jQuery(".sub-3").find('a').addClass('sub-sub-3 icon-shareable');
jQuery(".sub-4").find('a').addClass('sub-sub-4 icon-magnifier');
jQuery(".sub-5").find('a').addClass('sub-sub-5 icon-magnifier');
});
Here is the output code:
<span class="main-class-wrap">
<span class="sub sub-1">
<a href="http://link1.com" target="_blank" class="sub123 icon-one">
Link1
</a>
</span>
<span class="sub sub-2">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link2
</a>
</span> <span class="sub sub-3">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link3
</a>
</span>
<span class="sub sub-4">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link4
</a>
</span>
<span class="sub sub-5">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Lin5
</a>
</span>
<span class="sub sub-1">
</span>
<span class="sub sub-2">
</span>
<span class="sub sub-3">
</span>
<span class="sub sub-4">
</span>
<span class="sub sub-5">
</span>
</span>
I put them all in a fiddle
Could any one tell me if I am doing anything wrong with the code?
How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current.
Here is my html -
<header>
<div class="content-wrapper">
<div class="user-menu-wrapper">
<div class="hsn-logo"></div>
<div class="user-greeting-wrapper">
<div class="user-greeting">Hi, Abraham</div>
</div>
<div class="user-menu">
<ul class="user-menu-items">
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-account" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-favorites" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-bag" })</li>
</ul>
</div>
</div>
<div class="hsn-nav-wrapper">
<div class="hsn-nav">
<ul class="hsn-nav-items">
<li style="width: 25%">
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 15%">
<a href=""><span class="hsn-search-icon"></span>
</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>
</header>
<subnav id="shop" class="shop-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Deals</span></li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Clearance</span></li>
</ul>
</div>
</div>
</div>
</subnav>
<subnav id="watch" class="watch-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
</div>
</div>
</subnav>
Here is my Jquery / JS -
$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
});
});
Just glancing through your html - you have duplicate IDs. Your 'a' that links to 'play' also has an ID of 'play' - that element will be selected, not the subnav!
Also, two of your links are classed watch, none shop.
The simplest way to approach this is to hide all the <subnav> on each click. All your existing code will work just fine which already takes care of toggling the relevant <subnav>.
var $subNavs = $('subnav');
$subNavs.hide();
$('ul.hsn-nav-items li a').click(function () {
$subNavs.hide();
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
return false;
});
I also added a return false; to stop the default click event on the <a> being executed, which could result in a page load since href="#".
That said, <subnav> is a non-standard element and you would be better off using a simpler markup to describe the data. It may also prove useful to give the each subnav a common class which makes finding them via jQuery simpler.
I have also made a small demo using the following simplified code
HTML
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
<div id="shop" class="shop subnav">
shop
</div>
<div id="watch" class="watch subnav">
watch
</div>
<div id="play" class="play subnav">
play
</div>
JavaScript
var $subNavs = $('.subnav');
$subNavs.hide();
$('a').click(function () {
var $subNavToToggle = $('#' + ($(this).attr('class').split(' ')[0]));
var doToggle = $subNavToToggle.is(':not(:visible)');
$subNavs.hide();
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$subNavToToggle.toggle(doToggle);
return false;
});