Replace url with ellipses - javascript

I'm showing url path for every page showing where the user is exactly. Like if user came to home->mobile->design then I'm showing user path like "home/mobile/design". everything is working fine but for mobile I have to hide content between home and design like home/.../design. I'm not sure how to implement this. Can someone help.... Thanks for your help in advance.

EDIT:
New example with toggling content:
var url = 'home/mobile/design';
var start = url.indexOf('/');
var end = url.lastIndexOf('/');
var finalString = url.substring(0,start+1) + '...' + url.substring(end, url.length);
$('#myURL').text(finalString);
$('#myURL').click(function(){
if(!$('#myURL').hasClass('toggle')){
$('#myURL').text(url);
$('#myURL').addClass('toggle');
}else{
$('#myURL').text(finalString);
$('#myURL').removeClass('toggle');
}
})
https://jsfiddle.net/2mq0dwbd/1/
This code will do what you want:
var url = 'home/mobile/design';
var start = url.indexOf('/');
var end = url.lastIndexOf('/');
alert(url.substring(0,start+1) + '...' + url.substring(end, url.length))
This code will account for another variants as well, if you have more "sections" inside it will only take the first one and the last one:
home/some/deep/section/goes/here
result:
home/.../here
You can play with it and modify it to meet your particular needs, of course.
Hope it helps!
Fiddle:
https://jsfiddle.net/2mq0dwbd/

In case you don't want to use slice/substring you can use a regex which results in a smaller amount of code:
var test = 'home/mobile/design';
test.replace(/\/.*\//, '/.../'); // home/.../design
It also works for different versions:
var test2 = 'home/mobile/design/test';
test2.replace(/\/.*\//, '/.../'); // home/.../test

Related

I am trying to trim the output of a jQuery function

I am modifying a third-party script so that I can style the output.
Here is a segment of the original code:
var tip_content = $('<div>').addClass('tip_content').load(url, function() {
Which produces this output:
<div class="tip_content">
I need to add another class to the output to style it differently on each page. Therefore, it seems like a good solution to add the current html page file name as a class.
But I have no experience with JS.
Here is what I've managed to mangle together:
var tip_content = $('<div>').addClass('tip_content '+elem.attr('href')).load(url, function() {
Which produces this:
<div class="tip_content tickets.php?id=185">
This is almost exactly what I need. But I would be very grateful if someone could demonstrate how to trim the output to:
<div class="tip_content tickets">
You have to split the URL with . and takes the first-value from the splited array and add it to the div as second class.
Do it like below:-
var tip_content = $('<div>').addClass('tip_content '+elem.attr('href').split('.')[0]).load(url, function() {
A hard-coded example:-
var hrefs = "tickets.php?id=185";
$('div').addClass('tip_content '+hrefs.split('.')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Inspect and check my class</div>
try below code
s = elem.attr('href');
s = s.substring(0, s.indexOf('.'));
var tip_content = $('<div>').addClass('tip_content '+ s).load(url, function() {
I would like to add a modification to be safe. suppose your url is: tickets.sold.php and you want tickets.sold. In this case you should try this:
s = elem.attr('href');
s = s.substring(0, s.indexOf('.php'));
var tip_content = $('<div>').addClass('tip_content '+ s).load(url, function() {

passing actual URL parameters to a button

I'm working on a web funnel , that i would like to track starting from step number #1 .
I'm trying to pass URL parameter for example :
https://mywebsite.com/###/######.html?subid=160445&eng_source=160445&eng_subid=null&eng_click=1d1ba0f6784b4c36918f087b616a3366
i want to pass the "subid=#" to the next destination which is button link
so it becomes:
https://landing.mywebsite.com/2scstep.html?subid=160445
or what ever "subid" was there before .
i just need some instruction from where to start adding this or what language should i work with .
Thanks A lot .
OK, lets imaging you have button on the page, which is
<a id="button" href="https://landing.mywebsite.com/2scstep.html">
Take me to new destination
</a>
If I understood you question correctly, you want change the destiantion of the button (href) so it becomes oldhref + '?subid=#'
It can be done in many techniques in javascript. Simpliest way is to install jquery, and then make smething like this
//Wait untill whole document is loaded
$(document).ready(function(){
//You now is on the page, that has url e.g. `href` + `?subid=12345`
// you got to get you subid var to javascript
//Get whole url
var currentHref = window.location.href;
//Get only params part, by splitting string by ? and taking second part
var currentHrefParamsPart = currentHref.split("?")[1];
//Now get all params to array (there can be lots of params)
var paramsArray = currentHrefParamsPart.split("&");
//Now get subid value
var subid = false; //its not known yet
paramsArray.each(function(params){
var key = params.split('=')[0]
if (key == "subid") {
var subid = params.split('=')[1]; //We got it
}
})
//Now you gotta change href attribute of the button if subid was found
if (subid) {
var $button = $("#button");
var oldHref = $button.attr("href"); //get the old href
var newHref = oldHref + "?subid=" + subid; //make new href
$button.attr("href", newHref);
}
})
It is not working code, there could be mistakes or tyopos, I wrote it to give you an idea how to achieve the result, what techiques and languages should be used.

Opening webpage in javascript on trigger

I'm using a script called "HIT Scraper WITH EXPORT" to help me with my job. Right now it's set up in a way that any time there is a new posting the page plays a audible sound/ding. Normally when this happens I have to switch tabs and manually click on the new listing to preview it. I'm trying to make it so it automatically opens the listing before/after dinging. Also if possible having it put focus on that tab if I'm in a different one. Is any of this possible, where should I start? I'll post the code and some areas of interest I noticed, I just don't know what to do with these areas.. Thank you in advance.
The function that runs when a new hit is found I think:
function newHits(dingNoise) {
//console.log(dingNoise);
if (dingNoise || newHitDing)
document.getElementById("ding_noise"+audio_index).play();
}
I think "preview_link" is the var I need to automatically open after the ding sound plays.
var preview_link = "/mturk/preview?groupId=" + group_ID;
So my logic was something like:
function newHits(dingNoise) {
//console.log(dingNoise);
if (dingNoise || newHitDing)
document.getElementById("ding_noise"+audio_index).play();
window.open("/mturk/preview?groupId=") + group_ID;
}
Which did not work.. Here's the full script if anyone has any ideas.. Thanks again.
https://greasyfork.org/en/scripts/2002-hit-scraper-with-export/code
EDIT: I don't think the way I originally wanted to do this will work, nothing in the code knows/points to the actual new listings. All that's defined in the code is the preview link function. If there is some way to have it call/open that "var preview_link = "/mturk/preview?groupId=" + group_ID;" after the ding, that would probably be what I need.
for (var j = 0; j < $requester.length; j++)
{
var $hits = $requester.eq(j).parent().parent().parent().parent().parent().parent().find('td[class="capsule_field_text"]');
var requester_name = $requester.eq(j).text().trim();
var requester_link = $requester.eq(j).attr('href');
var group_ID=(listy[j] ? listy[j] : "");
group_ID=group_ID.replace("/mturk/notqualified?hit","");
var masters = false;
var title = $title.eq(j).text().trim();
var preview_link = "/mturk/preview?groupId=" + group_ID;
//console.log(listy[j]);
//console.log(title+" "+group_ID +" "+ listy[j]);
if (!group_ID || group_ID.length == 0){
preview_link = requester_link;
title += " (Requester link substituted)";
}
var reward = $reward.eq(j).text().trim();
var hits = $hits.eq(4).text().trim();
var time = $times.eq(j).parent()[0].nextSibling.nextSibling.innerHTML;
var description = $descriptions.eq(j).parent()[0].nextSibling.nextSibling.innerHTML;
//console.log(description);
var requester_id = requester_link.replace('/mturk/searchbar?selectedSearchType=hitgroups&requesterId=','');
var accept_link;
accept_link = preview_link.replace('preview','previewandaccept');
I'm thinking you want to do:
window.location.replace(window.location.host + '/mturk/preview?groupId='+ group_ID)
I'm actually not sure if you need the window.location.host + part.

How do I use page name as textbox value

There's a couple of things I'm trying to achieve with Javascript. I'm a bit of a noob, so bear with me.
Firstly I'm using this code to create a popup window:
HTML:
<img src="request.jpg"/>
JS:
var sPage;
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=400,width=800,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no');
var sPath=window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
window.name = sPage;
}
This part works fine, but what I'm then trying to do is take the current page name and put it into the value of a textbox in 'contact.html'.
This is the code I'm using on the popup page to try and do that:
function add(text){
var TheTextBox = document.getElementById("prodcode");
TheTextBox.value = TheTextBox.value + window.name;
}
This seems to work when it's a normal page I'm linking to, but it wont work if it's a popup. I also can't figure out how to get rid of the extension from the page name.
I realise there are probably a million better ways to do this, but this is the one that seems to make most sense to me. I've looked at cookies, but I can't seem to figure them out.
I know I'm asking a lot, but any help would be greatly appreciated.
Thanks.
If I'm understanding the question right, you could pass the window name as a query param in the URL you're passing to your newPopup function, then grab it in the contact.html page to put it into the box.
For example, your newPopup function could add the query parameter to the url like so:
function newPopup(url) {
var sPath=window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
var windowName = sPage.split(".")[0];
popupWindow = window.open(url + '?window_name=' + windowName,'popUpWindow','height=400,width=800,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no');
window.name = windowName;
}
Then, in your contact.html file, grab the query param when setting the value of your text box, using this sort of logic:
function parseURLParams(name, locat) {
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(locat);
if (results) {
return results[1] || "";
} else {
return "";
}
}
function add(text) {
var TheTextBox = document.getElementById("prodcode");
TheTextBox.value = TheTextBox.value + parseURLParams("window_name", window.location.href);
}
Hope it helps!

New window with content from modal content on opener page

i think i am not going about this quite right, being very new to jquery.
i have a page with 3 recipes on it hidden. when a link to recipe A is clicked it opens in a modal. i want to be able to print just the content of the recipe. so i am opening a new window (nonmodal) and trying to write the recipe to it (depending on which recipe is chosen)
this is the code i am using
$('a.new-window').click(function(){
var recipe = window.open('','RecipeWindow','width=600,height=600');
$('#recipe1').clone().appendTo('#myprintrecipe');
var html = "<html><head><title>Print Your Recipe</title></head><body><div id="myprintrecipe"></div></body></html>";
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
but it returns an error. i think it is close but not quite right. the error is:
missing ; before statement
[Break on this error] var html = "Print...="myprintrecipe">";\n
I think what you are looking for is the following:
jQuery(function($) {
$('a.new-window').click(function(){
var recipe = window.open('','RecipeWindow','width=600,height=600');
var html = '<html><head><title>Print Your Recipe</title></head><body><div id="myprintrecipe">' + $('<div />').append($('#recipe1').clone()).html() + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
Marius had a partially correct answer - you did have a javascript error in your html string, but the content wouldn't have been appended anyways even if the error didn't get thrown because you were trying to append the recipe before the #myprintrecipe div was even in the new window.
Hope this helps.
The problem is in your string. Change it to this:
$('a.new-window').click(function(){
var recipe = window.open('','RecipeWindow','width=600,height=600');
$('#recipe1').clone().appendTo('#myprintrecipe');
var html = "<html><head><title>Print Your Recipe</title></head><body><div id=\"myprintrecipe\"></div></body></html>";
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
The problem is that you had a " character inside the string, which ends the string. The script engine got confused and complained with the error message.
change :
var html = "<html><head><title>Print Your Recipe</title></head><body><div id="myprintrecipe"></div></body></html>";
to:
var html = "<html><head><title>Print Your Recipe</title></head><body><div id='myprintrecipe'></div></body></html>";
and take notes on the double quotes (")

Categories

Resources