Google News Box, Open News Page in New Window/Tab - javascript

I have attached a Google News Box on one of my pages.
Right now, if the visitor click on the news, they will leave my site and go to the news site.
I'm wondering is it possible to insert target="_blank" somewhere so the news is loaded in new window/tab.
Note: the link is inside the google's iframe. so I was thinking if i can somehow to create the on-click event on-top of the google iframe while grab the it's url.
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
style="border:0;margin:0;width:928px;height:100px;"
src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?
rsz=large&format=728x90&q=Internet%20Retailng%20Aus&element=true" scrolling="no"
allowtransparency="true"></iframe>
Solution:
1: please refer to alfro's answer.
2: code below using the api
google.load("elements", "1", {packages : ["newsshow"]});
function onLoad() {
var options = {
"linkTarget" : "_blank"
}
var content = document.getElementById('news');
var newsShow = new google.elements.NewsShow(content,options);
}

Find in documentation google.search.Search.LINK_TARGET_BLANK.
It's what you need. If you put your code would be easier to give an example.
EDITED
It's a little messy, but so does google here:
Page A:
<head>...</head>
<body style="font-family: Arial;border: 0 none;">
<iframe height="90px" width="728px" frameborder="0" marginheight=0 marginwidth=0 scrolling="no" src="pageB.html"></iframe>
</body>
Page B (google):
<iframe height="90px" width="728px" frameborder="0" marginheight=0 marginwidth=0 scrolling="no" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=small&q=Foreclosure,Mortgage Refinance&format=728x90"></iframe>

Google abandoned "newsshow". It had been deprecated for a long time but a few weeks ago newsshow just stopped working. I had to scramble to build a replacement for my sites.
Here is a Google News RSS replacement that in many ways is better:
http://www.gooplusplus.com/news-frame-guide.html
(BTW, links from the news stories are automatically opened in new tabs/windows.)
See this forum thread:
http://hypercube.us/forum/index.php?topic=1501.0

Related

Vimeo iframes for Toolset Post Archives

Essentially the Iframe from the Vimeo embed link does work individually, however, I am working on a global editor for displaying all posts. using javascript seems to be the only answer, but if someone knows a way to use a simple <video></video> tag with a Vimeo URL let me know.
Here is what I have
[wpv-post-date]
[types field='date'][/types]
[types field='bible-passage'][/types]
[types field='mp3'][/types]
<div class="audio-player"><div id="play-btn"></div><div class="audio-
wrapper" id="player-container" href="javascript:;"><audio
id="player"><source src="[types field='mp3' output='raw'][/types]">
</audio></div></div><a class="x-btn black-button x-btn-global sermon-
button sermon-audio" href="[types field='mp3' output='raw'][/types]"
target="_blank">Download</a>
<iframe src="https://player.vimeo.com/video/229578292?
title=0&byline=0&portrait=0" width="640" height="360" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>You Shall Not Steal
from <a href="https://vimeo.com/tomballbible">Tomball Bible
Church</a> on Vimeo.</p>
[wpv-post-featured-image]
[types field='sermon-image'][/types]
[wpv-post-taxonomy type="preacher" separator=", " format="link"
show="name" order="asc"]
The first source for the Vimeo player needs to remain in that format however the number at the end needs to change.
The "video" field has the auto-generated URL already so maybe I could pull the number from that? I am not familiar with java script.

How do I make a frame compatible with anchor

I have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.
The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame

Post a data to iframe(aspx) to capture it in Page load of aspx page

I have a HTML page and an iframe(aspx page) in it as shown below.
Mypage.htm
<div>
<iframe name="Frame1" id="ff1" src="http://example.com/example.aspx" frameborder="0" scrolling="no" height="600" width="500" style="text-decoration:none;" marginwidth="5"></iframe>
</div>
This Mypage.htm will be given as a link from other pages where user clicks and Mypage.htm opens in new tab.
I want to post data to the iframe. posted data is "website"= "true"(posted data is just an identification and is fixed) . The posted data is captured in page_load of the aspx page which is in iframe.
So now i am confused like how to post data to frame and at which event. I should be able to get posted data in the page load of aspx page.
How it can be done.
Simply just use a query string instead of the post data:
<div>
<iframe name="Frame1" id="ff1" src="http://example.com/example.aspx?website=true" frameborder="0" scrolling="no" height="600" width="500" style="text-decoration:none;" marginwidth="5"></iframe>
</div>
And in Page_Load check for Request.QueryString["website"] (instead of Request.Form["website"]).

embeded custom google map wont display without refresh

I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>
So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.

DIV swap onclick

I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?
this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.

Categories