I have two .html pages: page1.html and page2.html
In page1.html I have a carousel
<!-- First -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 1</h2>
</div>
</div>
</div>
<!-- Second -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 2</h2>
</div>
</div>
</div>
<!-- Third -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 3</h2>
</div>
</div>
</div>
(That is the most important part)
In page2.html I have a link:
Click me to go to page 3!
What do I add to the link and my carousel to make it so this all works as it should? I found this answer but do not understand how to implement it.
Here's the code from your link I have added comments to explain what it's doing.
function getSlideParameter(key) {
/*I'm not sure why would anyone choose a key with these special characters but,
* but if they do, following RegEx will replace those special characters
*/
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
//searches the URL for occurrence of &key=some number, in case key is 'slide' it's searching for &slide=some number
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
//replaces any '+' with single space
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
//checking if 'slide' is an integer and not float and that 'slide' is not a string
if (Math.floor(slide) == slide && $.isNumeric(slide))
return parseInt(slide);
else
return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
}
//finally load a particular slide using qs() function
$('#myCarousel').carousel(getSlideParameter('slide'));
This function is just trying to find value of the URL's query parameter named 'slide'.
So if current url is http://stackoverflow.com?hello&slide=2 getSlideParameter('slide') would give us 2.
This code is to be added to the page where your carousel slide resides, in your case it's page 1.
Add it to the bottom of the page or using jQuery's ready() function.
<!-- First -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 1</h2>
</div>
</div>
</div>
<!-- Second -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 2</h2>
</div>
</div>
</div>
<!-- Third -->
<div class="item">
<div class="container-fluid">
<div class="row">
<h2 class="carousel-text">Item 3</h2>
</div>
</div>
</div>
<script>
//preparation of carousel
</script>
<!-- new script for loading a particular slide -->
<script>
(function () {
function getSlideParameter(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
if (Math.floor(slide) == slide && $.isNumeric(slide))
return parseInt(slide);
else
return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
}
$('#myCarousel').carousel(getSlideParameter('slide'));
})();
</script>
Now finally we can give the link to specific slide in page2 as below
Slide 1!
Slide 3!
That's all there is to it.
Related
From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>
var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});
I need to programmatically extract titles within a webpage, inject anchor links right above those titles and then inject navigation links near the top of the page that will link to those anchors within the same page.
I need jQuery to select all headings with the class of 'iphorm-group-title’ and extract the text.
Above each heading, excluding the first heading, an anchor tag needs to be injected so that a visitor can link to that section of the page.
The text of each heading, excluding the first heading, needs to be injected before the first heading and linked to all the anchor tags that were injected in the previous step.
This form is generated by a plugin or I would just edit the HTML.
For reference, the page is located at:
http://mountpleasantmagazine.com/BestOfBallot/
Here is an example of the HTML as of now.
<div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
Here is some JS that will grab the elements and loop through the text, which is the point where I'm stuck.
jQuery('.iphorm-group-title').each(function () {
console.log(jQuery(this).text());
});
Here is how the HTML is expected to look after injecting the code.
<div>
<div>
SHOPPING & GOODS | FOOD & DRINK | <a href="#entertainmentleisure">ENTERTAINMENT & LEISURE</ a>
</div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<a name="shoppinggoods"></a>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<a name="fooddrink"></a>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<a name="entertainmentleisure"></a>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
I just made a code snippet for you hope so it's the exact what you needed.
var listElement=jQuery("<div id='menuList'></div>").insertBefore(".iphorm-elements");
jQuery(".iphorm-elements .iphorm-group-wrap:not(:first-child)")
.each(function() {
if (jQuery(this)
.not(".iphorm-group-wrap:first")) {
var heading = jQuery(this)
.find(".iphorm-group-title");
var headingName = heading.text()
.split(' ')
.join('')
.replace('&', '');
var lowerHeading = headingName.toLowerCase();
var anchorUrl = [lowerHeading.slice(0, 0), lowerHeading.slice(0)].join('');
var anchorText = heading.text();
var anchorLink=jQuery('<a name="' + anchorUrl + '"></a>')
.insertBefore(heading);
var anchorLink2=jQuery('' + anchorText + '' +"<span> | </span>")
.insertBefore(heading);
jQuery(listElement).append(anchorLink2);
}
});
jQuery("#menuList span:last-child").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iphorm-elements">
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">VOTER INFO</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
</div>
I have few comments in my code, like this:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">
comment One content
</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">
comment Two content
</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
and I have anchors like this:
one <br/>
two
These links content corresponds to the comments 'template' element, what I want to achieve is that when the user hover over any of these links it's correspondence content (between the comment) will be highlighted.
I started a simple jsfiddle example http://jsfiddle.net/Banzay/md79aaby/ , but not sure if this is even possible.
Sorry if I didn't explain this very well.
Youssef
Cleaned up my answer above and removed it.
You might have to change the parent you are looking for comments in. And the regex could use some love but this is the general idea.
HTML:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
one
<br/>
two
JS:
var getComment = function (templateName) {
return $("body").contents().filter(function () {
return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
})
}
$('a').hover(function () {
var templateName = this.href.split('#')[1];
var comment = getComment(templateName);
var element = $(comment).next();
element.toggleClass('highlight');
})
http://jsfiddle.net/md79aaby/18/
I'm building a webpage with jquery mobile and try to link pages with parameters.
This works but the issue I have is that I'm not able to link to the same page I'm currently stay with different parameters.
Example:
<html>
<body>
<!-- START INDEX PAGE -->
<div data-role="page" id="index">
<div data-role="header">
<h1>Indexpage</h1>
</div>
<div data-role="content">
<a href="index.html#listpage?list=1">
<a href="index.html#listpage?list=2">
</div>
</div>
<!-- END INDEX PAGE -->
<!-- START LIST PAGE (page to list content i.e. user list)-->
<div data-role="page" id="listpage">
<div data-role="header>
<h1>Listpage</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="listview">
</ul>
</div>
<script>
//to get passed parameter (list id)
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '= ([^&#]*)').exec(window.location.href);
if (results==null){
return null;
} else {
return results[1] || 0;
}
}
var list = $.urlParam('list');
switch(list) {
case 1:
//insert list one into page
break;
case 2:
//insert list two into page
break;
}
</script>
</div>
<!-- END LIST PAGE -->
</body>
</html>
So when I click on the list2 link when im staying on the list1, it doesn't do anything.
Thanks for your help
You can append html data on click event of anchor tag if you are using same page
OR
<a href="index.html#listpage?list=1" data-ajax="false">
<a href="index.html#listpage?list=2" data-ajax="false">
OR
$(document).delegate("a", "vclick click", function(event) {
$.mobile.defaultPageTransition = "slide";
var href = $(this).attr("href");
event.preventDefault();
if ( event === "click" ) { return; }
$.mobile.changePage(href);
});
**PAGE-1**
<div data-role="page" id="index">
<div data-role="header"> </div>
<div data-role="content">
List 1
List 2
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /page1 -->
<div data-role="page" id="list1">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page1 -->
<div data-role="page" id="list2">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page2 -->
So I solved it this way:
First I changed the switch, which started at pageint, to a standalone function:
function displayContent(contentid) {
switch(contentid) {
case 1:
//change content
break;
case 2:
//change content
break;
}
}
Then I changed the way how I display the content:
$('#listpage-header-title').html('Alle Turner'); //change title on header
//CHANGED PART START
//check if navbar already exists
if($('#listpage-sub-nav ul').length != 0) {
//remove activestate from all active buttons
$('.ui-btn-active').removeClass('ui-btn-active');
$('.ui-state-persist').removeClass('ui-state-persist');
//add activestate to pushed button
$('[onclick*="alle_tu"]').addClass('ui-btn-active');
$('[onclick*="alle_tu"]').addClass('ui-state-persist');
} else {
//if navbar doesn't exists add html code of the navbar
$('#listpage-sub-nav').html('<ul><li>Überblick</li><li>Turner</li><li>Turnerinnen</li></ul>');
}
//CHANGED PART END
//add autodivers to listview
$('#list-page-listview').attr('data-autodividers', 'true');
//change/add data to listview
showTeilnehmer('listpageM');
//refresh listview
$('#list-page-listview').listview('refresh');
break;
Hope someone helps
I am trying to work with an accordion. My goal is to have a '+' symbol showing when not expanded and a '-' when expanded. I am just trying to get the first swap to work and cannot get the .equals() function to compare properly. Any help?
<script type="text/javascript">
function replaceMe(){
var symbol = document.getElementById("swap1").innerHTML;
if(symbol.equals("+") {
document.getElementById("swap1").innerHTML="-";}
else {
document.getElementById("swap1").innerHTML="+";}
}
</script>
THIS IS THE HTML
<div class="accord">
<div class="title" onclick="replaceMe()">
<h2 id="swap1">+</h2>
<h1>Heading 1</h1>
</div>
<div class="desc">Sample Sample Fill Data</div>
<div class="title">
<h2 id="swap2">+</h2>
<h1>Heading 2</h1>
</div>
<div class="desc">More Fill Data Not Important</div>
<div class="title">
<h2 id="swap3">+</h2>
<h1>Heading 3</h1>
</div>
<div class="desc">Boring Filler Information</div>
</div>
It's JavaScript, not Java; you can safely use just '===' here to compare strings. ) And your if should really be if(symbol.equals("+")) - a closing parenthesis is missing in the code you quoted.