My webpage contains some RSS feeds from some random sites.
There are links within these feeds which take you to these sites. Is there anyway to load these webpages into a div on my page?
The problem Im having is that these RSS links are created dynamically when I create my RSS feeds.
Dose anyone have any suggestions?
function showLTab(key)
{
var myObject = science[key];
var stage = $("#leftFeed").children('#tabContent');
//forming the query
//LIMT controls amount of tabs displayed in each feed
var query = "select * from feed where url='"+myObject.feed+"' LIMIT 5";
//changing URL to YQL
var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?";
$.getJSON(url,function(data){
//removes any previous feeds
stage.empty();
//item exists in RSS
$.each(data.query.results.item || data.query.results.entry,function(){
stage.append(myObject['function'](this));
})
});
$("#leftFeed").children('#activeTab').text(key);
}
function showLeftDropDown()
{
var activeTab = $("#leftFeed").children('#activeTab');
//creating drop down div
var dropDown = $('<div>').addClass('dropDownList').css({'top': 10, 'width': activeTab.width()}).hide().appendTo('#leftFeed');
$.each(science,function(i){
// populates dropdown div
if(i==activeTab.text()) return true;
$('<div>').text(i).appendTo(dropDown);
})
dropDown.slideDown('fast');
}
use this jquery
https://github.com/sdepold/jquery-rss
it will help u
If you know the URL of the page that interests you (that is to say, this question is about the display of the page and not the retrieval of the links) and simply want to spit out the result into a container such as a div, you can do this:
$("#myDiv").load("page url");
This passes an Ajax request to the given url and loads the content into the selected element. See http://api.jquery.com/load/ for more info.
Another option is using iframes. You can create an iframe and then set the src property to the url that you are interested in using JavaScript:
document.getElementById("myIframe").src = "page url";
Okay, so if you don't know the URL but have the feed that you can parse, try a regex. Given that links look like this:
<link>http://www.someexamplerssdomain.com/main.html</link>
You can use this code to parse them all out into an array:
var regex = /<link>(.*?)<\/link>/gi;
var matches = new Array();
var match = regex.exec(rssInput);
while (match != null) {
matches.push(match[1]);
match = regex.exec(rssInput);
}
You can then use either of the two methods I first suggested to retrieve their content.
Related
Explanation
I have a site where I post my writings, I have a div of links that are all clickable that when clicked send 2 variables, the piece's title and link (then on the other page with the iframe, the title is displayed in an <h1\> and the link is passed to the iframe src).
I do this like this:
<div class="sidenav">
<h3> Writings:</h3>
<a href="iframe.html"
onclick="getLinkAndTitle('TITLE BLAH BLAH', 'https:/\/WWW.LINK-GOES-HERE');">TITLE BLAH BLAH</a>
...
</div>
Here is the getLinkandTitle() function (in my app.js):
function getLinkAndTitle(title, link) {
sessionStorage.setItem("title", title);
sessionStorage.setItem("link", link);
location.reload();
}
And this is on the page with the iframe:
<script>
window.onload = function () {
var title = sessionStorage.getItem("title");
var link = sessionStorage.getItem("link");
var iframe = document.getElementById('ifrm');
iframe.src = link;
var titleText = document.getElementById('title');
titleText.textContent = title;
}
</script>
...
<h1 id='title'></h1>
<iframe id='ifrm' src="" width="900" height="650" style="max-width:95%;border:3px solid black;"></iframe>
This no longer works for me because I need to be able to share the writings via individual link (right now it's just www.mysite.com/iframe.html for all of them).
I do still want to keep the iframe setup I have, meaning I don't want to make all my writings on different pages, I like how there's one page that takes in them (via google shared link (works for me)).
So I need the title and link to the individual writing to be passed on to the iframe page's URL somehow and have the iframe src take the URL and the <h1> take the title.
I only know JavaScript and HTML and I've never used jQuery or PHP but after looking for answers, using one of those seems like the only way... So if jQuery or PHP is in your answer, please me mindful I have zero experience with either and be as specific as possible.
Thank you! :)
One approach would be to use a url hash with a descriptive human readable slug for the article. Then store the relevant data (link , title and slug) in a javascript object or remote json file.
Something like:
const data = [
{title:'My cool article', link:'http...', slug: 'my-cool-article'},
{title:'Some other article', link:'http...', slug: 'some-other-article'}
]
Then in links use:
My cool article
<!-- ^^^^^ hash to match slug in data -->
Then in the iframe page you use the url hash to look through the data to find matching slug and use appropriate title and link (or defaults when no matching slug in url)
const hash = window.location.hash;// location object has page url components
// defaults for no match
let src = '/not-found.html', titleTxt = 'Not Found';
if (hash && hash !== '#') {
// remove the `#` from url hash
const hashSlug = hash.slice(1);
// use Array.prototype.find() to get matching item from array
const item = data.find(el => hashSlug === el.slug);
// if no match item is undefined
if (item) {
// set corresponding values
src = item.link;
titleTxt = item.title
}
}
document.getElementById('title').innerText = titleTxt ;
document.getElementById('ifrm').src = src;
In my website I have some part when you 'click' on it, It will show a (pop-up) div & grays the rest of the website, However I want to make a link/hashlink for that state.. something like this ( http://www.mywebsite.com/show-pop-up ), So whenever my visitors type the link above in their browser and go, They will come to my website with (the pop-up visible).
I saw this in Trello.com & Behance.com (When you click in a project it will show as pop-up with a new link in the browser).
Note: I need this in 'pure' JavaScript.
There are several ways you can achieve this. One of the following options may work for you.
Option 1: using hashes. Consider the following url: www.mywebsite.com/index.html#popup. You can retrieve the #popup value on startup of your website and act accordingly. See the code sample below.
document.addEventListener("DOMContentLoaded", function(event) {
// Website has loaded.
var hash = location.hash
// Check if the hash exists and is popup.
if (hash && hash === 'popup') {
// Show your popup
}
});
Another option would be to use query strings. Consider the following url: www.mywebsite.com?popup=true. First you have to retrieve the query strings, using for example the following function. Afterwards check if the popup querystring has been used.
function getParameterByName(name, url) {
if (!url) 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 popup = getParameterByName('popup');
// Check if we have the popup parameter.
if (popup) {
// Show popup
}
Suggest using
http://www.mywebsite.com#show-pop-up
instead of
http://www.mywebsite.com/show-pop-up
then using
if(location.hash === '#show-pop-up') {
// show your popup
}
on page loaded.
I am using a jquery lightbox plugin on a Wordpress site that opens videos fetched from rss in lighbox and I want to be able to construct a URL like which will send the user to my website and open the video on pageload. This with several videos on the same page.
Then display a button with each videos unique url as a sharebutton.
From googling around something like this could be a way?
jquery get
pass query param with unique url
jquery to open lightbox
jquery to load video plugin (youtube etc.)
Im not good at either jquery or vanilla js, but trying to grasp the concept. Any help appreciated.
Using a URL Query param is a good option to accomplish this. What we'll do is have a script that checks whether or not the Param exists. I've included code on how to do this. It's all done in javascript.
//This function will check if the current page has the query param of 'video' (or whatever you set it to) & then call your lightbox function.
//Put this in the footer of that page
function checkParam() {
var isVideo = getParameterByName('video');
if(isVideo == 'true') {
//call lightbox open function
}
}
checkParam();
//I'll use this function to get URL query params: http://stackoverflow.com/a/901144/2106563
//This should also go in the footer of the page
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
As for adding a youtube video within your lightbox, it can be done pretty easily with a link similar to this:
href="//www.youtube.com/embed/dQw4w9WgXcQ?feature=player_detailpage&rel=0&autoplay=1
The only part that you need to change between videos is: dQw4w9WgXcQ. That can be seen in the URL in the browser.
You'll notice that there are Query Params in the URL. One of them is autoplay. There are a bunch of others too if you wish to customize the link a bit more.
I'm trying to dynamically set the thumbnail shown when sharing to Facebook using javascript. I tried adding the meta tag "og:image" to the page (it's a JSP) and that works, but what I want to do now is to replace such image with another one dynamically loaded by javascript.
Basically, the page is calling an API upon loading, using javascript, and retrieves a list of images. I want to use one of those as the thumbnail.
I tried using javascript to replace the content of the meta tag, but Facebook doesn't seem to care abou t it (it does change if I check with my browser).
Is it possible to do this?
Thanks in advance!
Here is a function I used to extract the image url from a flash object tag's flashvars parameter, and then assign it to a meta tag by using jquery:
$(window).load(function(){
//Use $(window).load() instead of $(document).ready(), so that the flash code has loaded and you have all the html you need process with javascript already in place when you start processing.
var stringToExtractFrom = $('param[name="flashvars"]').attr('value');
//Get the flashvars parameter value which we'll use to extract the preview image url from.
var pos = stringToExtractFrom.indexOf("&");
//Search for the position ampersand symbols which surround the image url.
var stringToUse;
//The final string we'll use.
var startOfImageSrc = null;
//The first position where we discover the ampersand
var endOfImageSrc;
//The second position where we discover the ampersand
var lengthToSubstract
//How many symbols to chop off the flashvars value.
while(pos > -1) {
if(startOfImageSrc == null){
startOfImageSrc = pos;
}
else {
endOfImageSrc = pos;
lengthToSubstract = endOfImageSrc - startOfImageSrc;
}
pos = stringToExtractFrom.indexOf("&", pos+1);
}
stringToUse = stringToExtractFrom.substr(startOfImageSrc+7, lengthToSubstract-7);
$('meta[property="og:image"]').attr('content', stringToUse); });
Facebook robot never runs a java script code
but why you don't try to set og tags in in server-side ?
I need to show a DIV on two pages (URL's) but not on the others.
(I have jQuery on the pages if that helps.). I'm a complete noob so all help is very much appreciate. Thank's!
Case (1) where I want to show the DIV:
On the start page, when the web browser address field reads 'www.mydomin.com'
The start page is PHP so I guess the full URL is 'www.mydomin.com/index.php'
Case (2):
'www.mydomin.com/index.php?option=com_myblog&title.html&Itemid=1&lang=en'
WHERE this part is alway the same
'www.mydomin.com/index.php?option=com_myblog&'
AND this part is always unique
'title.html&Itemid=1&lang=en
Example
if (url == 'www.mydomin.com' or 'www.mydomin.com/index.php?option=com_myblog&') {
do this
xxxxxxxx
else
nothing
This should work, if I understand the question correctly
var url = document.location.href;
if (url.indexOf('www.mydomin.com/index.php?option=com_myblog&') >= 0) {
$('#div_id').hide();
} else {
$('#div_id').show();
}
But really, if you use PHP anyway, you should figure out how to not render the div in the first place.
You can parse the query string and show/hide the div based on the result.
I also think it should be handled from PHP code instead from JavaScript. And div should not be rendered in first place.
You can target a specific query parameter of the URL using window.location.search. Using the below code, you can find an exact match anddisplay/hide the HTML element:
var firstURLParam = window.location.search.substring(1).split('&')[0];
var datGuiEle = document.getElementById("elemID");
if(firstURLParam == "debug"){
datGuiEle.style.display = "block";
}
else {
datGuiEle.style.display = "none";
}