I'm trying to get webpage context by PhantomJS,
in my webpage, i have a table tag that has my main menu and each td tag containt my menu item like this :
<tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f">
<div id="TopMenuID"> <table border="1" width="100%" style="height: 100%;" cellpadding="10" cellspacing="0">
<tbody><tr><!-- Row 1 -->
<td><div onclick="ajaxPageChange("tm_home.txt","TopMenuID");ajaxPageChange("index_home.txt","ContentID"); ajaxPageChange("menu_home.txt","LeftMenuID");" style="cursor: pointer; color:#000000; text-align:center; text-decoration: underline;">Home</div></td><!-- Col 1 -->
setTimeout(function() {
console.log("");
console.log("### STEP 3: Click on page internal link (aka FRAGMENT)");
page.evaluate(function() {
var ev = document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
document.querySelector("div[onclick]").dispatchEvent(ev);
});
}, 10000);
I try to call OnClick by Phantomjs and get results, but i do not know how it possible.
is there any idea for this?
thanks.
Related
I am creating a table with div's that already have a background image in them. The classes are "sw", "sl", "so", "sa", "sn", and "su". I made that you could click on the div's and to the right will show the information for that div.
However, I tried adding a hover element to these div's, which work when I do not add the onclick function. With the onclick function, there is no hover that changes the div into a different background image. The background image stays the same when I click on a certain div.
How can you make the background image change when you click on the div?
Here is my HTML code:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div class="sw" onclick="show(0)"></div></td>
<td><div class="sl" onclick="show(1)"></div></td>
<td id="info" rowspan="3" style="width:325px;"></td>
</tr>
<tr>
<td><div class="so" onclick="show(2)"></div></td>
<td><div class="sa" onclick="show(3)"></div></td>
</tr>
<tr>
<td><div class="sn" onclick="show(4)"></div></td>
<td><div class="su" onclick="show(5)"></div></td>
</tr>
</table>
And here is my JavaScript code:
function show(num) {
var outputInfo = "";
if(num == 0) {
outputInfo += 'INFO HERE';
}
else if(num == 1) {
outputInfo += 'INFO HERE';
}
...
document.getElementById("info").innerHTML = outputInfo;
}
Oh, and by the way, my background images are used on the CSS portion and all of the classes above share the same image but they were assigned different positions.
Is there a way to show the images as separate backgrounds if another approach to clicking on a div?
Instead of using onclick, maybe try using something Tomm did. I probably encourage you to create a class for all of these id elements. Since you had a shared background image for the original background before the function is clicked, I added background-position. Here is what I did for the script by making a function that I put in the onload of the body (first portion is for backgrounds when clicked, second portion is for original background and will only show for those that are not clicked):
function onloadPage() {
// first portion
$('#sw').click(function() {
$(this).css("background-position", "0 0");
document.getElementById("info").innerHTML = 'INFO HERE';
});
$('#sl').click(function() {
$(this).css("background-position", "0 0");
document.getElementById("info").innerHTML = 'INFO HERE';
});
...
// second portion
$('.classname').on('click', function(e) {
if(!$(e.target).closest('#sw').length) { $('#sw').css("background-position", '0 0'); }
if(!$(e.target).closest('#sl').length) { $('#sl').css("background-position", '0 0'); }
...
}
And then the HTML:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div class="classname" id="sw" style="background-position:0 0;"></div></td>
<td><div class="classname" id="sl"></div></td>
<td id="classinfo" rowspan="3" style="width:325px;"></td>
</tr>
</table>
Obviously you will have to adjust your background-positions to the way you need it to look.
Well, your code should looks like:
document.getElementById("info").style.backgroundImage = "url('image.png')";
here I am assuming that info is the id of the div which you want to change background.
This snippet should do. I've linked a couple of random images so you can test it.
By clicking on the div, the info is displayed on the right and that div's background gets updated. By passing the 'this' keyword as argument of the show method you can avoid logics that depend on the div's id.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.sw{
background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
.sl{
background-image: url("https://mdn.mozillademos.org/files/7693/catfront.png");
}
</style>
<script>
function show(num, t) {
var outputInfo = "";
if(num == 0) {
outputInfo += 'This is the information about the image now displayed in div0';
var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
t.style.backgroundImage= newUrl;
}
else if(num == 1) {
outputInfo += 'This is the information about the image now displayed in div1' ;
var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
t.style.backgroundImage= newUrl;
}
document.getElementById("info").innerHTML = outputInfo;
}
</script>
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td style="border: 1px solid red"><div class="sw" onclick="show(0, this)"></div></td>
<td style="border: 1px solid red"><div class="sl" onclick="show(1, this)"></div></td>
<td style="border: 1px solid red" id="info" rowspan="3" style="width:325px;"></td>
</tr>
</table>
</body>
</html>
You can make a simple onclick function in javascript/jQuery ( I use this code with jQuery 1.7.1 ) like the following:
$('#changeMe').on('click', function() {
$('#changeMe').css('background-image', 'url(urlhere)');
})
Where #changeMe is the div id
$('#changeMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://firefoxzeneize.altervista.org/FirefoxLogo.png)');
})
div{
width : 512px;
height : 512px;
background-image : url("https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20170911_Google_Chrome_logo_vector_download.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="changeMe"></div>
After compilation GWT client side from my widgets I'm getting the following structure.
<td align="left" width="100%" class="gwt-TabBarRest-wrapper" style="vertical-align: bottom;"><div class="gwt-TabBarRest" style="white-space: normal; height: 100%;"> </div></td>
How can I put button element instead of to have this structure:
<td align="left" width="100%" class="gwt-TabBarRest-wrapper" style="vertical-align: bottom;"><div class="gwt-TabBarRest" style="white-space: normal; height: 100%;"><button type="button" class="gwt-Button helpButton"></div></td>
Something like this should work:
ButtonElement buttonEl = DOM.createButton().cast();
buttonEl.setInnerHTML("MyButton01");
Element el = DOM.getElementById("myButtonPlace");
el.appendChild(buttonEl);
DOM.sinkEvents(el, Event.ONCLICK | Event.ONMOUSEOVER);
DOM.sinkEvents(buttonEl, Event.ONCLICK | Event.ONMOUSEOVER);
DOM.setEventListener(buttonEl,
new EventListener() {
#Override
public void onBrowserEvent(Event event) {
GWT.debugger();
switch (DOM.eventGetType(event)) {
case Event.ONCLICK: GWT.log("you clicked the button");
break;
case Event.ONMOUSEOVER: GWT.log("the mouse is over the button");
break;
}
}
});
First of all set an Id for your div.
Your html now looks like something like this
<td align="left" width="100%" class="gwt-TabBarRest-wrapper" style="vertical-align: bottom;"><div id="some_id" class="gwt-TabBarRest" style="white-space: normal; height: 100%;"> </div></td>
Now use the following code snippet.
Button button = new Button();
....
....
RootPanel.get("some_id").add(button);
You can do this in JQuery with .html method wich allow you to set the content of an HTML element.
$("div.gwt-TabBarRest").html('<button type="button" class="gwt-Button helpButton"></button>');
I am using photobox to display all images within a div in a nice gallery style. However I want to include an image in the div that I do not want in the gallery, a PDF icon, which onlick will download a pdf file. At the moment this icon appears in the gallery when clicked, I would like to know how to exclude maybe a section of the div.
Here is my code
<div id="gallery">
<td width="226" align="right"><table width="206" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="199" align="center"><img src="images/GrndFloor_dimension_th.jpg" alt="Ground Floor" width="182" height="182" border="0"/></td>
</tr>
<tr>
<td height="64" align="center" background="images/thumbs-text-holder.jpg" class="planscopy" style="background-repeat:no-repeat"><table width="151" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="104"><span class="planscopy" style="background-repeat:no-repeat">Ground Floor - Dimensions</span></td>
<td width="47" align="right"><img src="images/pdf.png" width="48" height="51"/></td>
</tr>
</table></td>
</tr>
</table></td>
</div>
<script type="text/javascript">
$('#gallery').photobox('a', { thumbs: true }, imageLoaded);
function imageLoaded() {
console.log('image has been loaded...');
}
I would like the pdf.png image not to appear in the gallery, just to be a link to the document. Is there maybe a way to exclude a div id within a div?
Any help would be greatly appreciated.
try to give the A-Element ( PDF ) a class like "exclude" and try this JS-Code:
<td width="47" align="right"><a class="exclude" href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>
<script type="text/javascript">
$('#gallery').photobox('a:not(.exclude)', { thumbs: true }, imageLoaded);
function imageLoaded() {
console.log('image has been loaded...');
}
</script>
$("#gallery").photobox("a:not(:has([src$='pdf.png']))', { thumbs: true }, imageLoaded);
will work.(Demo for selector: http://jsfiddle.net/pUkz2/)
Note that the above selector is slower than if you add the class pdf to the a and use
$("#gallery").photobox("a:not(.pdf)', { thumbs: true }, imageLoaded);
I did a performance test: http://jsperf.com/pukz2
Just to clarify, when you load my site I have a bit of text that fades in (quote), and then fades out. Afterwards a new bit of text (my brand name) fades in.
Since I want people to have enough time to read the first text (the quote) the fade in and fade out are a bit long, however I don't want people to get impatient after visiting the site for the 5th time and having to wait every time.
Therefore I was thinking of a "skip-like" button or text (IE: SKIP) so that they can fastforward to where the brand name fades in.
Any help would be appreciated!!! Here's an example of what I currently have!!
http://jsfiddle.net/K6SpB/
HTML
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<center>
<div id="mytext" align="center">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="200">
<center>
<font size="4px" id="quote" color="black">THIS IS A QUOTE.</font>
<br>
<font size="12px" id="brandname" color="black">BRAND NAME.</font>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
JAVASCRIPT
$(document).ready(function() {
$('#quote').hide().delay(1000).fadeIn(5000).delay(3000).fadeOut(2000);
$('#brandname').hide().delay(11500).fadeIn(2000);
});
CSS
<style type="text/css">
#quote, #brandname {
position:relative;
display: none;
float:center;
}
#mytext {
}
</style>
You probably want jQuery .stop() (http://api.jquery.com/stop/)
So, if you add a Skip link:
Skip
The code would look like this:
$('#skip').click(function(e) {
e.preventDefault();
$('#quote, #brandname').stop(true, true);
});
The first "true" tells jQuery to remove any pending animations from the animation queue, the second "true" tells it to skip straight to the end of the animation.
I have 2 IP Cameras that have a internal server page (i.e. http:\192.168.1.10\video.html). This page receives jpeg images from the camera and auto-refreshes (loads) using javascript.
Source code from the video.html
<html>
<head>
<title>ipCam - JPEG Video</title>
<style type='text/css'>
html,body
{
background-color:white;
color:black;
font-family:arial;
font-size:12pt;
}
a,a:visited,a:active
{
color:grey;
text-decoration:none;
}
a:hover
{
text-decoration: underline;
}
h1
{
background-color:black;
color:white;
padding:5px;
}
h2
{
background-color:lightgrey;
padding:5px;
}
</style>
<script type='text/javascript'>
function loadImage()
{
var now=new Date();
document.getElementById('the_img').src='image.jpg?'+now.getTime();
}
</script>
</head>
<body>
<img id='the_img' src='image.jpg' onload='loadImage()' onerror='loadImage()'>
<br><br>
<a href='.'>Home</a>
</body>
What I would like to do is build a custom site that has both live feeds in it. I would prefer not to use <iframe>. I would rather use Javascript or something of the sort.
I have a basic understanding of HTML but very little Javascript experience. I can obviously look at the code a get a good idea of what is going on, but this has stumped me!
Any help would be appreciated!
I would guess that you could create a new HTML page (just copy the video.html from one of the cameras) on a local webserver and modify the script to include the ID of the img element you are updating and the IP address of the camera you are grabbing the feed from...something like this (which is set to automatically update the images every 4 seconds) -- (disclaimer: air code, not tested)
Thanks #A.M.K. for fixing some stupid mistakes in my code:
<script type='text/javascript'>
function loadImage(imgID, address)
{
var now=new Date();
document.getElementById(imgID).src='http://' + address + '/image.jpg?'+now.getTime();
}
setInterval(function() {
loadImage("the_img_1", "192.168.0.1");
loadImage("the_img_2", "192.168.0.2");
}, 4000); //Interval to refresh at, in milliseconds
</script>
Then just setup another img tag to receive the image:
<body>
<img id='the_img_1' src='http://192.168.0.1/image.jpg'>
<br><br>
<img id='the_img_2' src='http://192.168.0.2/image.jpg'>
<a href='.'>Home</a>
</body>
Note that you have two img elements now, each with a unique id which is fed to the function along with the IP address of the camera.
That may not work exactly in your situation, but that should give you an idea of how to accomplish it...
// JS 9 CAM...
//LAN.JS add http : // if you need
var URL11='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL12='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
var URL13='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
var URL14='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL15='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL16='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL17='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL18='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL19='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
function kamera1011(){document.getElementById("imgDisplay11").src=URL11+'&'+I++;};
function kamera1012(){document.getElementById("imgDisplay12").src=URL12+'&'+I++;};
function kamera1013(){document.getElementById("imgDisplay13").src=URL13+'&'+I++;};
function kamera1014(){document.getElementById("imgDisplay14").src=URL14+'&'+I++;};
function kamera1015(){document.getElementById("imgDisplay15").src=URL15+'&'+I++;};
function kamera1016(){document.getElementById("imgDisplay16").src=URL16+'&'+I++;};
function kamera1017(){document.getElementById("imgDisplay17").src=URL17+'&'+I++;};
function kamera1018(){document.getElementById("imgDisplay18").src=URL18+'&'+I++;};
function kamera1019(){document.getElementById("imgDisplay19").src=URL19+'&'+I++;};
function kamera1020(){document.getElementById("imgDisplay20").src=URL20+'&'+I++;};
function kamera1021(){document.getElementById("imgDisplay21").src=URL21+'&'+I++;};
function kamera1022(){document.getElementById("imgDisplay22").src=URL22+'&'+I++;}
<! HTML-index.htm >
<html>
<script language="JavaScript" src="js/lan.js"></script>
<body onload="kamera1011(); kamera1012(); kamera1013(); kamera1014(); kamera1015(); kamera1016(); kamera1017(); kamera1018(); kamera1019();>
<table border="1" width="100%" cellspacing="1" cellpadding="1">
<tr>
<td width="100%" align="center">
</td>
<td>
<a href="index.htm">
Updates Cams...
</a>
</td>
</tr>
<tr>
<td>
<! Cam 1 >
<img id="imgDisplay11" border="1" width="412" height="318" onload=setTimeout("kamera1011()",10) onerror=setTimeout("kamera1011()",100)>
</td>
<td>
<! Cam 2 >
<img id="imgDisplay12" border="1" width="412" height="318" onload=setTimeout("kamera1012()",10) onerror=setTimeout("kamera1012()",100)>
</td>
<td>
<img id="imgDisplay13" border="1" width="412" height="318" onload=setTimeout("kamera1013()",10) onerror=setTimeout("kamera1013()",100)>
</td>
</tr>
<tr>
<td>
<img id="imgDisplay14" border="1" width="412" height="318" onload=setTimeout("kamera1014()",10) onerror=setTimeout("kamera1014()",100)>
</td>
<td>
<! Cam 5 >
<img id="imgDisplay15" border="1" width="412" height="318" onload=setTimeout("kamera1015()",10) onerror=setTimeout("kamera1015()",100)>
</td>
<td>
<! Cam 6 >
<img id="imgDisplay16" border="1" width="412" height="318" onload=setTimeout("kamera1016()",10) onerror=setTimeout("kamera1016()",100)>
</td>
</tr>
<tr>
<td>
<! Cam 9 >
<img id="imgDisplay17" border="1" width="412" height="318" onload=setTimeout("kamera1017()",10) onerror=setTimeout("kamera1017()",100)>
</td>
<td>
<! Cam 8 >
<img id="imgDisplay18" border="1" width="412" height="318" onload=setTimeout("kamera1018()",10) onerror=setTimeout("kamera1018()",100)>
</td>
<td>
<! Cam 9 >
<img id="imgDisplay19" border="1" width="412" height="318" onload=setTimeout("kamera1019()",10) onerror=setTimeout("kamera1019()",100)>
</td>
</tr>
</table></html>
Just put the following javascript in your page, changing the interval parameter to your like:
<script type='text/javascript'>
var interval = 5; //Interval in seconds, to retrieve images
setInterval(function loadImage() {
var now=new Date();
document.getElementById('the_img').src='image.jpg?'+now.getTime();
}, interval * 1000);
</script>
and in the html just insert the image wherever you want, like this:
<img id='the_img' src='image.jpg'>