I have frames setup on a page, is there a way to force all links in a child frame to open in a new window('blank') rather than 'self'?
I have no access to the page that I have in my frame, sometimes the links open new pages sometimes they just transfer to a totally new page. I want to keep some consistency by making all links open in new pages.
You could use some javascript:
var links = document.getElementsByTagName('a');
for (var i = 0, l = links.length; i < l; ++i) {
links[i].target = '_blank';
}
You'll just have to get a reference to the document in your frame (sorry, it's been a long time since I've worked with frames). From memory it's something easy like frame.document
I'm not positive that you can modify the DOM of external pages, but it's worth a shot.
var links = document.getElementsByTagName('a');
for (var i = 0, l = links.length; i < l; ++i) {
links[i].target = '_blank';
}
This will not work for Frames loaded by Javascript to open in a new Window :(
Don't use frames.
Or load them in using a HTTP object (there's plenty in a lot of server-side languages), modify the links using regular expressions to point to '_blank' instead' and then put them on your page.
Alternatively, you might be able to use the DOM:
nodeLink = document.getElementById("alink");
nodeLink.setAttribute("target", "_blank");
What am I missing when I respond with the following?
If you can't change the page in the frame, you're not going to change its behavior.
Put this between your <head> and </head> tags:
<base target="_blank">
Just replace _blank with whatever target you want to be the base for all links on the page.
Source: http://www.w3schools.com/tags/att_base_target.asp
Related
I'm looking for a way that I can link 2 (or more) HTML files to 1 hyperlink. They shouldn't open simultaneously, but the code should choose 1 randomly to open.
I am using .
I hope someone can help.
I have looked online on solutions, but I didn't find anyone talking about it. Or maybe I didn't use the right words to look it up.
You can't do that with CSS or HTML. In order to randomize something you can use JS.
Here is an example of what you can do:
JavaScript
// Your links in array
var links = [
"www.link1.com",
"www.link2.com",
"www.link3.com",
"www.link4.com"];
openLink = function () {
// preventDefault() on an <a> tag
event.preventDefault();
// random number between 0 and the number of links
var randnum = Math.random() * links.length;
// round random number to use as an array index
randnum = parseInt(randnum, 10);
window.location(links[randnum]); // open link
};
HTML
<button onclick="openLink();">Go to random website</button>
I've been working on Sencha test and I am in a situation to find all the attribute values like IDs, NAMEs, etc to add those in my scripts, to represent the component. So what I am doing for that is,
go to web page -> right click component -> Inspect element -> and then get enough component attributes by referring to the HTML code.
Is there any way to find attribute values of components in an HTML page other than inspecting it ??? Please advice..
Try the App Inspector for Sencha chrome extension, which will help you to debug ExtJS and Sencha Touch applications much easier.
It also helps you to inspect your component tree, data stores, events, and layouts.
You can install it from the below URL,
App Inspector For Sencha
Hope this helps!
To get Attribute Values of component elements programmatically:
First, get the component. There are various ways, e.g.:
var component = Ext.getCmp(id) gets you the component with a certain id.
var component = Ext.ComponentQuery.query(xtype) gets you an array of all components of a certain xtype
Second, on that component, call getEl() or any other element selector, e.g.:
var el = component.getEl()
var el = grid.getView().getEl()
var el = formfield.inputEl
Third, on the el, call getAttributes:
var attributes = el.getAttributes()
attributes will now contain an object like this:
class:"x-grid-view x-grid-with-col-lines x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable"
data-componentid:"tableview-1325"
id:"tableview-1325"
role:"rowgroup"
style:"margin: 0px; overflow: auto; width: 317px; height: 664px;"
tabindex:"0"
you can press ctrl+u that will show you the page source. use ctrl+f to find the element which u want. This is easier than inspect element.
Go to the browser console and execute the below script to collect the list of attributes of each element.
var parentEl = document.getElementById("container");
getElementsAndAttributes(parentEl);
function getElementsAndAttributes(container) {
var all = container.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
console.log(all[i].tagName);
var attrs = all[i].attributes;
var keys = Object.keys(attrs);
for (var j = 0; j < keys.length; j++) {
var attr = attrs[keys[j]];
console.log(attr.name + " -> " + attr.value);
}
}
}
<body>
<div id="container">
<span class="title" style="color:GREEN;">Phineas</span>
<img src="https://cdn.pastemagazine.com/www/blogs/lists/2010/05/12/phineas.jpg" width="104" height="142">
</div>
</body>
I have seen a few examples on Google Groups which demonstrate how to modify the css of the infobox. In this particular example, javascript is used to append a css link to the head of the document:
https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI
var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
This, however, has not resulted in any changes to the style of my markup.
At best, I have been able to wrap the contents of the infobox by iterating through the entities in the .then function call subsequent to loading a geoJson dataset. When wrapping the contents, I can set style values which are readily apparent in the resulting markup.
var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data) {
viewer.dataSources.add(data);
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];
if (entity.properties.hasOwnProperty("description")) {
entity.description = '<div style="height: 360px;">' + entity.properties.description
+ '</div>';
}
}
}
This is useful, but does not completely satisfy the requirements of my app.
Could someone provide additional insight into overriding the theme of the infobox, without having to iterate over entities to modify the value of their description properties?
The original solution here wasn't working, because the infoBox is an iframe that has not yet asynchronously loaded when you were trying to modify it.
Instead, you can add an load listener to the iframe, like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var frame = viewer.infoBox.frame;
frame.addEventListener('load', function () {
var cssLink = frame.contentDocument.createElement('link');
cssLink.href = Cesium.buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
frame.contentDocument.head.appendChild(cssLink);
}, false);
This waits for the iframe to become ready to receive the modification, and then applies it.
For what it's worth, I've found success in modifying the theme of the infobox by simply importing my css files in the head of the document. I'm not sure why I wasn't able to modify it directly with stylesheets, as it wasn't previously affecting the infobox's appearance, and this issue was mirrored in the posts that I found in the cesium-dev Google Group. Regardless, it seems to be working just fine now.
Okay, so I need to change images on hover in my Angular app. However, due to some peculiarities of the site, it wasn't really feasible to change images on hover via css [without a ton of extra work], which would have been the best way, I realize.
So instead, I'm using ng-mouseenter and ng-mouseleave to change the images on hover.
landing.jade
img.share-button(src='images/btn_share.png', ng-click='dropdownShareIcons()')
img.share-icon-top(src='{{ shareIcons[0].orig }}', data-id='0', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[1].orig }}', data-id='1', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[2].orig }}', data-id='2', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
Then in the controller I have an object which contains the paths to the images, and the functions which switch images on hover.
landing.js
$scope.shareIcons = [
{orig: 'images/follow_weibo_grey.png', hover: 'images/follow_weibo_colored.png'},
{orig: 'images/follow_wechat_grey.png', hover: 'images/follow_wechat_colored.png'},
{orig: 'images/follow_youku_grey.png', hover: 'images/follow_youku_colored.png'},
]
$scope.colorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].hover;
}
$scope.decolorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].orig;
}
This all works fine and well on my local environment, but on the production server it is veeeerrrrry slow. Like, 2-3 seconds to switch the images.
So my question is - is there an easy way to fix this? Either something within angular or a workaround/hack. Doesnt really matter as long as image switch time is sped up a bit. Or is it going to continue to be slow as long as I'm switching images via JS like this? Ideally, I would like avoid rewriting this using CSS.
Thanks in advance.
Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
// for (i = 0; i < $scope.members.length; i ++){
// return members[i].source + ",";
// }
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
)
I would consider optimizing the PNG image sizes. There are batch optimization tools available online, here is a blog post comparing a few of them to get you started: http://www.sitepoint.com/image-compression-tools/ perhaps you can test optimize a couple of images to see if you notice a change?
GL!
What is a reliable way to use data URIs for images? I know IE6/7 don't support them, so will this work?
I use data URIs for images by default
If browser is IE6/7 it shows the image (not as data but actual image) using javascript
include the image (not as data) in <noscript>.
My question is: will the image be fetched in <noscript> even if the browser supports javascript and data URIs?
If you do want to go down this road (and I personally would not bother), you could do it...
// Parse user agent and figure out if this browser supports data
// URIs - e.g. `supportDataUri()`. Also, store the image path
// somewhere - I'll assume for convenience an attribute called `data-image-src`
if ( ! supportDataUri()) {
var images = document.getElementsByTagName('img');
for (var i = 0, imagesLength = images.length; i < imagesLength; i++) {
var imgSrc = images[i].getAttribute('data-image-src');
images[i].src = imgSrc;
}
}