I have a loop in Blogger that selects the last 5 posts.
I want to apply different css to the first of these last 5 posts and different css to the other 4 posts.
Current script applies same css to all of them, how can i keep first post separate.
Here is the script;
let postCount = 5;
function funcrct(JSON) {
const POSTS = JSON.feed.entry;
let postTitle, postUrl = "";
let rpc = document.querySelector(".postList");
for (let i = 0; i < postCount; i++) {
POSTS[i].link.forEach((el, i) => {
if (el.rel === "alternate") {
postTitle = el.title;
postUrl = el.href;
}
})
let thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:webp))/)[0];
rpc.innerHTML += `<li>
<a href="${postUrl}"><figure>
<img src="${thumbnail}" alt="${postTitle}"/>
<figcaption>
${postTitle}</figcaption></figure></a>
</li>`;
}
}
var url = document.location.origin;
var fsrc = document.createElement("script");
fsrc.src = `${url}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${postCount}&callback=funcrct`;
document.body.appendChild(fsrc);
Html
<div><ul class='postList'></ul></div>
I have a form in Google Sheets, which passes URL parameters to a page, which then should show content based on the URL parameters.
So if a person checks "item 1" and "item 2" in the Google Sheet, the parameter gets passed on as follows:
https://my-url.com/?item1=value1&item2=value2
Now there's several div containers, which are set to display:none with css. When the URL parameter is met, the hidden div container should show up. So the html is:
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>
I've found some code online, which does pretty much that, but it can only display one div at a time: https://jennamolby.com/how-to-display-dynamic-content-on-a-page-using-url-parameters/
My problem is, that for every passed parameter, a field has to show.
Can anyone help me with this? I'm really not an expert in js by any means.
Good Luck
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var item1 = getParameterByName('item1');
var item2 = getParameterByName('item2');
if (item1 == "value1")
{
document.getElementById("value1").style.display = "block";
}
if (item2 == "value2")
{
document.getElementById("value2").style.display = "block";
}
.hidden
{
display: none;
}
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>
You could do something like this:
$.each(getUrlVars(), function(i, x) {
$('#' + x).show();
})
function getUrlVars() {
var vars = {},
hash;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
//vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
getUrlVars is taken from this answer, and modified a bit.
Demo
var url = "https://my-url.com/?item1=value1&item2=value2"; //replace with window.location.href
$.each(getUrlVars(), function(i, x) {
$('#' + x).show();
})
function getUrlVars() {
var vars = {},
hash;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
//vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>
try this
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
return false;
};
let item1 = getUrlParameter('item1');
let item2 = getUrlParameter('item2');
if(item1 =='value1' &&item2 =='value2')
{
document.getElementById('showhide').style.display = 'block';
}
<div id="showhide" style="display: none">
hi hi
</div>
I have a function to extract all the image captions in a Google docs which is being called using a button in my Plug-in, the problem is when I comment the ui.alert() part the function is executing twice. The code is:
function refFig() {
var body = DocumentApp.getActiveDocument().getBody();
// var ui = DocumentApp.getUi();
// ui.alert('Inside the function');
var images = body.getImages();
var images_caption = [];
var j = 1;
for (i = 0; i < images.length; i++) {
var image = images[i];
var linkString = image.getLinkUrl();
if (linkString != null) {
var caption = linkString.slice(15, linkString.length);
var refUrl = '#D2L_fig_ref_' + caption;
images_caption[j++] = refUrl;
}
}
return images_caption;
}
The jquery used to call the function is:
$(document).ready(function() {
$('#refFig').click(call_refFig);
});
function call_refFig() {
this.disabled = true;
$('#error').remove();
google.script.run
.withSuccessHandler(after_refFig)
.withFailureHandler(function(msg, element) {
showError(msg, $('#button-bar'));
element.disabled = false;
}).refFig();
}
The HTML of the button is:
<div id="div_refFig" style="padding-left:0px">
<a id="refFig" href="#!" class="collection-item grey-text text-darken-3">
<i class="material-icons d2ltheme left">find_replace</i>
Refer
</a>
</div>
url: testPage?id=67346756384/indexList
how to get the location of the id from the above url? I tried this:
getIdLocation = $(location).attr("href");
id = getIdLocation.substring(getIdLocation.lastIndexOf("/") + 1);
but that gets me "indexList". I need the id.Any ideas??
Thanks!
I have used this function, it works great.
It will be something like this for your case, pretty simple:
var id = GetURLParameter('id');
Full code from the link:
function GetURLParameter(sParam){
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
Although, I prefer to pass the url as a parameter. It will be easier to write unit tests for that.
Use the first and second parameters of substr to designate the start and length of the string to be extracted:
var id = str.substring(str.lastIndexOf("=")+1,str.lastIndexOf("/"));
I have a select tag to choose categories, each option contain the category number as value.
The category number is in the URL string.
I'm trying to write a JS to check if the option value is the same as the category number in the URL and if so make the option selected. so far the script dosnot work.
What am I doing wrong?
here is the code:
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] === VarSearch){
return KeyValuePair[1];
}
}
}
function compareValue(){
var x = document.getElementById("selectcategory").length;
for (var i = 0; i < x; i++){
var categNo = document.getElementById("selectcategory").options[i];
var UrlValue1 = GetUrlValue('icid');
if (categNo === UrlValue) {
document.getElementById("selectcategory").options[i].selected = true;
}
alert(UrlValue1);
}
}
if needed, I will send a link to the work.
if doing that with jquery is easier, i will be happey to learn.
thanx.
The problem is that categNo should be the value of the corresponding option tag. Also it's better to cache select element and not requery DOM in the loop:
function compareValue() {
var select = document.getElementById("selectcategory");
var x = select.options.length;
for (var i = 0; i < x; i++) {
var categNo = document.getElementById("selectcategory").options[i].value;
var UrlValue = GetUrlValue('icid');
if (categNo === UrlValue) {
select.options[i].selected = true;
}
}
}
Demo: http://jsfiddle.net/dj7c6sdL/