best regards, I want to write a javascript code that write to Paragraph <P><br data-mce-bogus="1"></P> which exists inside this
<html><head>
</head>
<body>
<table id="contentMessage_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 260px;">
<tbody>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="contentMessage_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 216px; display: block;">
<head xmlns="http://www.w3.org/1999/xhtml">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr" style="font-size: 12px; font-family: arial,helvetica,sans-serif;">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>
</iframe>
</td>
</tbody>
</table>
</body>
</html>
I tried this code
javascript:document.getElementById('contentMessage_ifr').contentDocument.body.innerHTML="it works";
is there something wrong with my code , it works fine on w3schools javascript editor
thanks in advance
Your code is getting the ID of the iframe.
Try getting a hold of the paragraph.
Here's a jsfiddle example which should work:
http://jsfiddle.net/kakashi/QR9N8/
The relevant code you want, if you want to use jQuery, is:
$('p:has(br[data-mce-bogus=1])').append("<p>Hi There</p>");
maybe your html code isn't very clean, you are missing some html tags like "html" and "tr", try this html:
<html>
<head>
</head>
<body>
<table id="contentMessage_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 260px;">
<tbody><tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="contentMessage_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 216px; display: block;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr" style="font-size: 12px; font-family: arial,helvetica,sans-serif;">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>
</iframe>
</td></tr>
</tbody>
</table>
</body>
</html>
Related
I'm trying to link a series of images together I know the basic HTML Code for linking 1 image to another would be
<!DOCTYPE html>
<html>
<head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<a href="Imagelink1">
<img alt="" src="Imagelink2"
>
</a>
</body>
</html>
But I'm trying to continue the chain from Imagelink2 to Imagelink3 to Imagelink4 and so on.
How would I go about doing that?
it's not possible to do that. You have to create a link for each image.
Example below:
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<a href="Imagelink1">
<img src="Imagelink1" alt="">
</a>
<a href="Imagelink2">
<img src="Imagelink2" alt="">
</a>
<a href="Imagelink3">
<img src="Imagelink3" alt="">
</a>
</body>
</html>
Is that what you're looking for?
img {
display: block;
width: 200px;
height: 200px;
margin: 0 auto 500px;
}
<!DOCTYPE html>
<html>
<head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<a href="#img2">
<img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-674010.jpg&fm=jpg" id="img1" alt="" />
</a>
<a href="#img3">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" id="img2" alt="" />
</a>
<a href="#img1">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg" id="img3" alt="" />
</a>
</body>
</html>
![enter image description here][1]I have a dropdown element which is not identified by selenium webdriver and the following is the code for it. I need to click on id=lnkMenu1 which then opens the drop down and then click on id="lnkMenu2_ul". But selenium is not identifying. I tried Actions commands and Css selector, xpath none of them works.
<div class="nestedMenuDiv">
<a id="lnkMenu1" class="" onclick="javascript:parentClick('lnkMenu1'); return false;" href="#">Wireless & Alerts</a>
</div>
<ul id="entMenu1_2" style="left: 107px; top: 21px; display: none;">
<div class="nestedMenuDiv">
Dropdown to click
<a id="entMenu1_2" target="bodyFrame" href="#" onclick="navClick('Alerts.Retail.AdHoc','entMenu1_2',1, ''); return false">FidConnect</a>
</li>
I am getting no such element found error
The following is the complete HTML code. Please suggest me how do I go about it
<html>
<head>
<frameset border="0" frameborder="no" rows="100%, *">
<frame marginwidth="0" marginheight="0" frameborder="NO" src="main.do?browserOK=Y" name="mainframe">
<html>
<head>
<frameset border="0" frameborder="no" rows="100%, *">
<frame marginwidth="0" marginheight="0" frameborder="NO" src="main.do?browserOK=Y" name="mainframe">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Alpha - ECA Web Portal</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="../theme/styles/nav_ecapt.css" type="text/css" rel="stylesheet">
<script src="../theme/scripts/common.js" type="text/javascript">
<script src="../theme/scripts/main.js" type="text/javascript">
<script src="../theme/scripts/menuNav.js" type="text/javascript">
<script type="text/javascript">
</head>
<body id="mainbody" onresize="mainResize()" onunload="mainUnload()" onload="load()" scroll="no">
<div id="topnav" class="wrap" style="position:absolute;top:0;left:0">
<div id="header">
<a href="../index.jsp">
</div>
<div id="nav">
<div class="nestedMenuDiv">
<ul id="lnkMenu0_ul">
<div class="nestedMenuDiv">
<a id="lnkMenu1" onclick="javascript:parentClick('lnkMenu1'); return false;" href="#">Wireless & Alerts</a>
</div>
<ul id="lnkMenu1_ul">
<div class="nestedMenuDiv">
<ul id="lnkMenu2_ul">
<div class="nestedMenuDiv">
<ul id="lnkMenu3_ul">
<ul id="lnkMenu0_4_ul" class="nestedlist">
<ul id="lnkMenu0_5_ul" class="nestedlist">
<ul id="lnkMenu0_12_ul" class="nestedlist">
<ul id="lnkMenu0_28_ul" class="nestedlist">
<ul id="lnkMenu2_6_ul" class="nestedlist">
</div>
<div id="toplinks2">
<div id="toplinks">
</div>
<iframe id="bodyFrame" class="mainIFrame" frameborder="0" marginwidth="0" marginheight="0" src="body.do?ent=ECA.Intro" scrolling="no" name="bodyFrame" style="height: 279px; width: 1366px; top: 77px; display: block;">
<iframe id="menuFrame1" class="menuCover" frameborder="0" marginwidth="0" marginheight="0" src="javascript:'<body>'" scrolling="no" name="menuFrame1" style="width:100%; height:0px">
<iframe id="menuFrame2" class="menuCover" frameborder="0" marginwidth="0" marginheight="0" src="javascript:'<body>'" scrolling="no" name="menuFrame2" style="width:100%; height:0px">
<script language="JavaScript">
</body>
</html>
</frame>
</frameset>
</html>
</frame>
</frameset>
</html>
lnkMenu2_ul is a UL object, selenium can not click on such elements, only on clickable elements.
You can add an LI under the UL and click on it
i have to two pages in jquery mobile and in each of the pages is a div called content and inside the divs i call external pages into it by means of ajax. for "page1" the call works perfectly but for "page2" the call isn't working. though the div in "page2" is having the same name as that of "page1".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#content').load('total.asp');
}, 3000);
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<table width="311" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="77">Content</td>
<td width="102"><div id="content"></div></td>
<td width="102">Go to Page 2</td>
</tr>
</table>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<p>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<table width="320" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="77">Content</td>
<td width="102"><div id="content"></div></td>
<td width="102">Go to Page 1</td>
</tr>
</table>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</p>
</body>
</html>
try using:
$("div").find("[data-role='content']").load('total.asp');
because you have given it as data attribute. you can better use class if you have multiple id with same name in that case it will be:
$(".content").load('total.asp');
ID has to be unique. try changing id="content" to class="content" and then try the below code
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.content').load('total.asp');
}, 3000);
});
Why tr tag does not show my buttons horizontally but vertically instead.
Similar code works properly on jsfiddle
What am I doing wrong?
here my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link href="css/menuprincipale.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="msapplication-tap-highlight" content="no" />
<script src="cordova.js"></script>
<script src="js/jquery.js"></script>
</head>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<table class="clsActionTable">
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
<button class="clsActionButton" id="idEditButton">Edit</button>
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
</table>
<div data-role="footer" data-position="fixed">
<img src="img/logo.png" />
</div>
</div>
here my CSS:
.clsActionTable
{
width: 100%;
height:20%;
color: white;
font-size: smaller;
}
.clsActionButton
{
width: 180px;
height:40px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
height:20%;
width:100%;
background-color: #4E5A81;
color: White;
}
I am using these:
Cordova 3.5
jQuery 1.4
js
html5
Try this code.
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
</td>
<td style="text-align: center;">
<button class="clsActionButton" id="idEditButton">Edit</button>
</td>
<td style="text-align: center;">
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
For anyone who has this same problem and the good answer above does not work, in my situation removing data-role="table" from the table html in jQuery mobile solved the problem as it does make the table vertical by default. Even better way for sure would be to do this via css.
i found html5 game (one player with computer) in a site and convert it to 2 player.this is my summarized code:
<html>
<head><title></title></head>
<body onload="javascript: paintBoard();">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"
</canvas>
<script>
.... //my html5 game logic is written in here that works correctly
</script>
</script>
</body>
</html>
when i run browser to see my (this file name is tictactoe.html)code in browser no problem to see the game but when i put this code to another page that has template i can't see anything.that page name is play.php and like this :
<!DOCTYPE HTML>
<html>
<head>
<title>world Game Center </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/light.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
<script type="text/javascript" src="js/tictactoe.js"></script> //this is the game logic that i suggest above.
</head>
<body >
<div id="main">
<!-- begin header -->
<header>
<nav>
<ul class="sf-menu" id="nav">
<li>home</li>
</ul>
</nav>
<div id="logo"><h1>game center onlineworld</h1></div>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<center>
<form id="name_form">
<h1>chat</h1>
<!-- <input type=text id="name_input"
style="width: 200px; margin: 2px" disabled>
<input type="submit" id="connect_button" value="Connect"
style="width: 70px; margin: 2px" disabled>
</form>
-->
<textarea id="chat_box" readonly="readonly"
style="width: 400px; height: 400px;
margin: 2px; resize: none"></textarea>
</textarea>
<form id="message_form">
<input type=text id="message_input"
style="width: 220px; height: 18px; margin: 2px" disabled>
<input type="submit" id="send_button" value="Send"
style="width: 60px; margin: 2px" disabled>
</form>
</center>
</div>
<div id="right_content">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"></canvas>
</div>
</div>
<!-- end content -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>