the problem at the moment is that when the windows get resized some text gets cut off. I've seen websites where when the window resizes the text changes to an abbreviation or another word. People were telling me that this is angular js but since then I've tried finding something related to it and couldn't. So i'm back to using good old javascript and here is my code
http://jsfiddle.net/duy8zvmm/71/
The problem is that i don't want this first
var myspan = document.getElementById('players-signedup');
if (myspan.innerText) {
myspan.innerText = "Players";
}
else
if (myspan.textContent) {
myspan.textContent = "Players";
}
and can't understand why i need it there, because the resize if statements i have do work, i have tested using background colors on a div. So i can't understand why they aren't working here
Related
First of all, I am not a programmer. I do not know Javascript at all. I'm trying to create a Chrome extension that modifies my browser tab's title, by taking a specific string on a webpage. I know how to create Chrome extensions (just barely) and I just need to modify the Javascript to do what I want (which I do not know how).
I found the following script online and am trying to modify it but can't figure out how to get it working. Here is the script:
https://pastebin.com/dY1LSdjT
// Fire this event any time the mouse is moving. Sucks for performance, but it's a better experience
document.addEventListener("mousemove", function() {
// This will get us the banner
let bannerTextElements = document.getElementsByClassName("dijitReset dijitInputField dijitInputContainer");
console.log(bannerTextElements);
console.log(bannerTextElements[0]);
if (bannerTextElements[0]) {
console.log("ok!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
console.log(bannerTextElements[0].innerHTML);
// This will get us the text
let bannerTextLine = bannerTextElements[0].getElementsByClassName("dijitReset dijitInputInner");
console.log(bannerTextLine);
document.title = bannerTextLine[0].innerHTML
}
}, false);
And here's the website viewed in developer mode. I would like to get the text "blahhhh" and use that for the title of my browser tab.
Below is a different webpage and the difference here is that the "div class" names will change. The numbers in those class will change to different numbers, but the structure and the overall name remains the same. For example, "ms-Button-label label-549" may change to "ms-Button-label label-640". This happens whenever you refresh the page. I found that the "viewport" id name doesn't change though, so I think if we can use that as a reference and then just look at the nested div classes and reference them and extract the value (in this case Crystal Mountain).
Fixing your code
You got like 95% of everything you need.
The one thing you are missing right now is that the fact that an input element does not posses an "innerHTML" (That is why it isn't closed like this: <input>renderedText</input>). Instead you want to check for it's value:
document.title = bannerTextLine[0].value;
Some Improvements:
Search by ID
You have a well defined input which can be more easily obtained by looking it up using the id:
let bannerTextLine = document.getElementById('lanDeviceIndex_searchBox');
End result:
const bannerTextLine = document.getElementById('lanDeviceIndex_searchBox');
bannerTextLine.addEventListener("blur", function() {
if (bannerTextLine != null) {
document.title = bannerTextLine.value;
}
});
This is the entire JS code. Note that I changed the event to blur which activates when the form is left, this should be optimal for your case.
I am a very new web developer. I'm doin fine with HTML and CSS and im trying to learn javascript. Im very new 1 month ago I never coded a single line, and I've made 2 or 3 websites already but none are JS capable.
I know I can do this in jquery and have already, but I want to Understand it and I want to be able to do it in vanilla javascript.
So here it is . I am making a simple game for practice, all it does is ask questions and change elements from display = none to display = block based on a click event to two big YES or NO buttons.
So.... this first code targeting yes_button works fine. The instructions Hide and the first questiong (Q1) appears.
the No button does not work, and I cannot figure out why, it is essentially the same code targeting a different element.
Things I checked :
the element id/selectors are correct
camelCase is good,
no unclosed braces,
semi colons are good,
is the mistake in the logic somewhere?
window.onload = function() {
yes_button.onclick= function() {
document.getElementById("instructions").style.display="none";
document.getElementById("q1").style.display="block";
};
no_button.onClick=function() {
document.getElementById("instructions").style.display="none";
document.getElementById("nointro").style.display="block";
};
};
You can remove the window.onload function call. You can place your JavaScript imports just before the closing tag so the dom is ready before you attempt to click on the button.
Your JavaScript Events should look like this:
document.getElementById("yes_button").onclick = function(){
document.getElementById("instructions").style.display= "none";
document.getElementById("q1").style.display = "block";
};
document.getElementById("no_button").onclick = function(){
document.getElementById("instructions").style.display="none";
document.getElementById("nointro").style.display="block";
};
the iTop fourms are pretty inactive and I am pretty stuck so I thought I'd ask here if that is ok. I am attempting to add my own piece of javascript to work onchange of the iTop organization select bar.
Here is a link to iTop if needed: http://www.combodo.com/spip.php?page=rubrique&id_rubrique=8
Extra info on my iTop forum question, no answers yet: https://sourceforge.net/p/itop/discussion/922360/thread/dd1da92f/
So iTop is a piece of software made using php, html, js and css but I am new to php so I have ran into a little bit of a problem. I am trying to implement a piece of javascript which will change the top-bar of the css to a different colour based on organization, I made a small prototype independent of iTop and it works perfectly. However I am unable to add the onchange() method along with the javascript as the main user interface is generated dynamically using php. I have tried numerous ways to implement the javascript but none have worked. Here are some pictures of iTop and code to help:
This is a picture showing the inspect element of iTop and how I came to believe jquery-1.7.1.min.js may be the correct location to place the code.
So I have tried going into this file and copy and pasting in my Java Script code but in some locations it has no affect and within function(a){....} it results in iTop only displaying a blank page, I could be going about this totally wrong but from what I have seen this file seems to be the one I am to edit to get what I want.
here is the javascript i am trying to implement:
var changeStyle = function(){
//HTML
var selectedValue = document.getElementById("org_id").value;
//CSS
var trimColor = document.querySelector("#top-bar");
//BT
if(selectedValue=="3"){
//change banner colour
trimColor.style.backgroundColor= "#3498db";
}
//Bell Aliant
else if(selectedValue=="27"){
//change banner colour
trimColor.style.backgroundColor= "#f1c40f";
}
//Bell Canada
else if(selectedValue=="26"){
trimColor.style.backgroundColor= "#e74c3c";
}
else
trimColor.style.backgroundColor="#ecf0f1";
}
Here are some pictures of it working in my non iTop version of just HTML, JS and CSS:
This is an old question but I'll answer it anyway as the answer is still ok for the last versions of iTop.
To inject some JS in the page, you have to use the iPageUIExtension::GetNorthPaneHtml(iTopWebPage $oPage) API which gives you acces to the iTopWebPage object. Then you can use the various public methods such as "iTopWebPage::add_ready_script($sScript)" to inject $sScript into all of the backoffice pages. Moreover, the script will be executed once the DOM is ready.
You can find an example here.
class PageUIExtension implements iPageUIExtension
{
/**
* #inheritdoc
*/
public function GetNorthPaneHtml(iTopWebPage $oPage)
{
...
$oPage->add_linked_script(utils::GetAbsoluteUrlModulesRoot() . 'molkobain-handy-framework/common/js/handy-framework.js');
}
}
Note: You will need to make your own iTop extension, check here for how to do it.
Although I do not believe it is the best solution I have entered the following code into jquery-1.1.1.min.js as shown
And I have achieved the desired result, the trim now changes with the organization change, this however is not the perfect solution I was looking for and is a bit slow but not in the sense that you'd get annoyed, at least in my opinion. Mission Accomplished for the moment!
I'm trying to do something simple to practice my Javascript (which I learned some recently) and I'm trying to do a game on it (pacman to be precise).
I am trying to build that game board on the browser by creating images dynamically. I've done an array like this:
var images= new Array(25);
for(i=0;i<25;i++)
images[i]= new Array(25);
And, for the game board I used a matrix done with 0 and 1's with 25x25 size (not going to post it here cause is too big and would make my text hard to read) called board.
For the images that I am using right now I have something like this:
var image_empty = new Image();
image_empty.src="Images/empty.jpg";
var image_wall = new Image();
image_wall.src="Images/wall.jpg";
For the initialization function I have something like this:
function drawField()
{
for(i=0;i<board.length;i++)
{
for(j=0;j<board[i].length;j++)
{
if(board[i][j] == 0)
draw(i,j,image_empty);
else if(board[i][j] == 1)
draw(i,j,image_wall);
}
}
}
And for drawing the images themselves I am using this:
function draw(x,y,img)
{
images[x][y] = new Image(22,22);
images[x][y].src = img.src;
images[x][y].style.position = 'absolute';
images[x][y].style.left = 40+x*22;
images[x][y].style.top = 40+y*22;
}
Every time I run this code nothing appears on the screen. I've tried several times use a load of things but nothing happens. I am saving the pictures (at least I think I am) and still nothing.
Can someone give me some pointers of what could be wrong?
PS: Some people pointed me out using the appendChild method would solve the problem, still, since pacman will be moving around I can't use it to store my images (and I was planning to use the draw function to draw anything).
And btw nor Web Developer plugin or firebug point out errors (the code is correct from their perspective).
Creating an Image in the method you describe doesn't actually display the image. Even putting attributes and styling to make it appear a certain way doesn't add it to the DOM. The advice about append child is correct. For example, if you had:
<div id="main"></div>
and you called
document.getElementById("main").appendChild(images[x][y]);
this would insert the image inside the div. You could do this repeatedly to generate the equivalent of...
<div id="main">
<img src... />
<img src... />
...and so on
</div>
Then, your CSS styling and positioning would work.
There's nothing wrong with your script, but Firebug does display a rendered version of the DOM. As you run the script, you will actually see the HTML tab of Firebug changing with the images you've added to the page.
Also, keep in mind that the DOM must complete loading before you are able to run this. You can accomplish this by doing a simple:
<body onload="drawImages()">
UPDATE: Once you've actually added the 25x25 images, the array still references the elements - they're just now part of the DOM. So, you can change their source via:
images[x][y].src = "newImage.jpg";
If you, for some reason, wanted to remove an image from the board, leaving a gap, you can remove it from the DOM
document.getElementById("main").removeChild(images[x][y]);
or just hide it via CSS.
I'm working on a little image gallery, where you'd roll over a small thumbnail, the larger image would display over it. Clicking on the image would load a full size version in an overlay.
http://shopcoobie.server303.com/shop/
The issue is with the larger image, the rollovers are working fine, but the script I have updates the href which points to the full size image only seems to work the first time I click the image.
$$('.thumbs img').each(function(s) {
$(s).observe('mouseover', function(e) {
var el = e.target;
var thumb = $(el).src;
var large = $(el).alt;
$(el).up(3).down(1).href = large;
$(el).up(3).down(2).src = thumb;
console.log((el).up(3).down(1).href);
console.log(thumb);
});
});
The console outputs the proper image reference, so it seems this should work (and partially does), Im just not sure why it only works once.
Thanks
Rich
I think the lightview plugin builds up its list of images first, then you change the src dynamically, and it doesn't update. So try adding a call to Lightview.updateViews(); at the end of the mouseover handler above.
From Lightview:
Lightview.updateViews(): Force a reset of all Lightview
elements on the page. Most of the time
you won't need to do this since
Lightview will pick up on newly
inserted elements automatically. After
updating existing elements it might be
required to call this function.
So yours is a case where it doesn't automatically pick up the change.