I am currently trying to open an image in a new window by clicking on it. But i cant seem to figure out where my code is wrong. Any solution?
function largePic(){
var imageNumber = document.getElementById("img2");
imageNumber = this.getAttribute('src').split(".", 1);
window.open(imageNumber[0] + "zlatan-stor.jpg");
}
You should try changing "this.getAttribute('src').split(".",1);" to
imageNumber.getAttribute('src').split(".",1);
Are you sure that #img2 is the one being clicked? If it isn't just do it like this:
function largePic(){
var imageNumber = document.getElementById("img2");
var link = imageNumber.getAttribute('src').split(".", 1);
window.open(link[0] + "zlatan-stor.jpg");
}
this will work only if the function is called inline (which you shouldn't do it, you should have your js code in a separated file)
This question is very similar to yours.
I think the main problem with your code is that window.open expects a URL and one isn't being provided.
Following the answer found at this link should allow you to separate the code into an external file, which as #Skatox mentioned, is a good practice.
Related
Pardon me if this is a very silly question. I'm brand new to JS and I was wondering how I can use this function in other parts of my code. I looked at tutorials and other websites, but the way they define functions seems to be different than what I have here. Could anyone please nudge me in the right direction?
$('.message_div').each(function message_function()
{
console.log("One liner");
var th = $(this);
var ih = $(this).outerHeight(); // outer height
var oh = $(this).find('.message').outerHeight();
console.log("Oh", oh);
var txt = $(this).find('.message').html();
console.log("Ih", ih);
if (oh > ih)
{
th.html('');
th.html('<marquee class="message" direction="up" scrollamount="1" scrolldelay="0">' + txt + '</marquee>')
}
});
//message_function(); -----> Is this the right way?
There are several intricacies here with regards to what jQuery does. The simple way of referencing this function later on would be to store it in a variable:
function message_function()
{
console.log("One liner");
var th = $(this);
//... (rest of function omitted for brevity)
}
$('.message_div').each(message_function);//note that the function handle is used here,
//and not the result of the function which would
//have used the () to call it
///and then later on
message_function();
However, the problem here is with this. jQuery will bind this behind the scenes (which means it works fine in each), however in order to properly call the message function separately, you would need to have an element ready to bind. For example,
var element = document.querySelector("div");
message_function.call(element);
alternatively:
var element = document.querySelector("div");
var elementMessage = message_function.bind(element);
elementMessage();
Here is a broader explanation of what this is, and how jQuery interacts with it: https://stackoverflow.com/a/28443915/1026459
Inside the same file :
Move that code inside a function
Call the function
Outside of that file :
Move the function (you just created) to a .js file
Include the .js file in the desired document
Make sure the DOM elements properties match what's in the script
So...I've been setting up a brand-new wiki for the past four days. While everything's going almost smoothly, I'd like to deal with a special touchup.
I created a preload template à la Wikipedia, "Template starter", some hours ago. While I could go the other way and create an input form, I want to make it so that red links in the Template namespace always lead to the code from this page, whenever a new one is ready for creation. So that:
http://rfm.referata.com/w/index.php?title=Template:Foo&action=edit&redlink=1 (default)
becomes:
http://rfm.referata.com/w/index.php?title=Template:Foo&action=edit&redlink=1&preload=Template:Template+starter (target)
by way of a JavaScript snippet added to the site's Common.js and Mobile.js.
Haven't come across similar MW-based examples, so I'd like to make sure everything's A-O.K.
Working from this answer, you could do something like this in Mediawiki:Common.js:
$(function() {
var preload = 'Template:Template_starter';
$("body.ns-10 #mw-content-text a.new").attr('href', function(i, h) {
// Maybe some links already have a preload parameter.
if (h.indexOf('preload=') !== -1) {
return h;
}
// All others get it appended.
return h + "&preload=" + preload;
});
});
Note that the check for a pre-existing '&preload=' isn't all that robust.
This extension should work well in your case https://www.mediawiki.org/wiki/Extension:NewArticleTemplate
Improving on what you provided last time, Mr. Wilson:
$(function() {
var preload = 'Template:Template_starter';
$("a.new[href*='Template:']").attr('href', function(i, h) {
// Maybe some links already have a preload parameter.
if (h.indexOf('preload=') !== -1) {
return h;
}
// All others get it appended.
return h + "&preload=" + preload;
});
});
Note that the previous version only worked within pages in the Template namespace; this fix applies to all pages with a red link to a nonexistent template. Thanks a dozen!
I'm trying to use PDF.js' viewer to display pdf files on a page.
I've gotten everything working, but I would like to be able to 'jump to' a specific page in the pdf. I know you can set the page with the url, but I would like to do this in javascript if it's possible.
I have noticed that there is a PDFJS object in the global scope, and it seems that I should be able to get access to things like page setting there, but it's a rather massive object. Anyone know how to do this?
You can set the page via JavaScript with:
var desiredPage = [the page you want];
PDFViewerApplication.page = desiredPage;
There is an event handler on this, and the UI will be adjusted accordingly. You may want to ensure this is not out of bounds:
function goToPage(desiredPage){
var numPages = PDFViewerApplication.pagesCount;
if((desiredPage > numPages) || (desiredPage < 1)){
return;
}
PDFViewerApplication.page = desiredPage;
}
In my case I was loading pdf file inside iframe so I had to do it in other way around.
function goToPage(desiredPage){
var frame_1 = window.frames["iframe-name"];
var frameObject = document.getElementById("iframe-id").contentWindow;
frameObject.PDFViewerApplication.page = desired page;
}
if Pdf shown into iframe and you want to navigate to page then use below code. 'docIfram' is iframe tag Id.
document.getElementById("docIframe").contentWindow.PDFViewerApplication.page=2
No idea what I'm doing or why it isn't working. Clearly not using the right method and probably won't use the right language to explain the problem..
Photogallery... Trying to have a single html page... it has links to images... buttons on the page 'aim to' modify the path to the images by finding the name currently in the path and replacing it with the name of the gallery corresponding to the button the user clicked on...
example:
GALLERY2go : function(e) {
if(GalleryID!="landscapes")
{
var find = ''+ findGalleryID()+'';
var repl = "landscapes";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
var GalleryID = "landscapes";
}
}
},
There's a function higher up the page to get var find to take the value of var GalleryID:
var GalleryID = "portfolio";
function findGalleryID() {
return GalleryID
}
Clearly the first varGalleryID is global (t'was there to set a default value should I have been able to find a way of referring to it onLoad) and the one inside the function is cleared at the end of the function (I've read that much). But I don't know what any of this means.
The code, given its frailties or otherwise ridiculousness, actually does change all of the image links (and absolutely everything else called "portfolio") in the html page - hence "portfolio" becomes "landscapes"... the path to the images changes and they all update... As a JavaScript beginner I was pretty chuffed to see it worked. But you can't click on another gallery button because it's stuck in a loop of some sort. In fact, after you click the button you can't click on anything else and all of the rest of the JavaScript functionality is buggered. Perhaps I've introduced some kind of loop it never exits. If you click on portfolio when you're in portfolio you crash the browser! Anyway I'm well aware that 'my cobbled together solution' is not how it would be done by someone with any experience in writing code. They'd probably use something else with a different name that takes another lifetime to learn. I don't think I can use getElement by and refer to the class/id name and parse the filename [using lots of words I don't at all understand] because of the implications on the other parts of the script. I've tried using a div wrapper and code to launch a child html doc and that come in without disposing of the existing content or talking to the stylesheet. I'm bloody lost and don't even know where to start looking next.
The point is... And here's a plea... If any of you do reply, I fear you will reply without the making the assumption that you're talking to someone who really hasn't got a clue what AJAX and JQuery and PHP are... I have searched forums; I don't understand them. Please bear that in mind.
I'll take a stab at updating your function a bit. I recognize that a critique of the code as it stands probably won't help you solve your problem.
var currentGallery = 'landscape';
function ChangeGallery(name) {
var imgs = document.getElementsByTagName("img") // get all the img tags on the page
for (var i = 0; i < imgs.length; i++) { // loop through them
if (imgs[i].src.indexOf(currentGallery) >= 0) { // if this img tag's src contains the current gallery
imgs[i].src = imgs[i].src.replace(currentGallery, name);
}
}
currentGallery = name;
}
As to why I've done what I've done - you're correct in that the scope of the variables - whether the whole page, or only the given function, knows about it, is mixed in your given code. However, another potential problem is that if you replace everything in the html that says 'landscape' with 'portfolio', it could potentially change non-images. This code only finds images, and then replaces the src only if it contains the given keyword.
I am trying to get a link from some youtube embedded video's, in order to make some links to them, which in their place trigger a nice fancybox to watch the video in.
Getting the ID from the embedded video, and replacing it in the right link isnt the problem. It gets dirty as soon as I try to code in the loop.
The javascript I use is as following:
$('.portfolio_det iframe').each(function(i) {
var videolink = this.src.replace('http://www.youtube.com/embed/', '');
var videolink = videolink.replace('?fs=1&feature=oembed', '')
$('.portfolio_thumb .youtubeLink').each(function(i) {
$(this).attr('href', "http://www.youtube.com/watch?v=" + videolink);
});
});
The Last piece of the code retrieves the link in
Though they all get the href created on the first youtube video.
How do I set the variable to be in the loop aswell?
To make it all a bit clearer, here is a jsfiddle from the setup:
JS fiddle
You are defining var videolink twice and leaving the ; off of the end of the second one.
The second line should be:
videolink = videolink.replace('?fs=1&feature=oembed', '');
Define the variable outside the loop. Also once if you have defined a variable you dont have to put var in front of it.
var videolink;
$('.portfolio_det iframe').each(function(i) {
videolink = this.src.replace('http://www.youtube.com/embed/', '');
videolink = videolink.replace('?fs=1&feature=oembed', '')
$('.portfolio_thumb .youtubeLink').each(function(i) {
$(this).attr('href', "http://www.youtube.com/watch?v=" + videolink);
});
});