How can I insert something just below a certain div?
I have a jwplayer on my page which usually have an id of jwplayer-1 being inserted by jwplayer plugin for wordpress.
What I want to be able to do is to insert a div just below that if it exist.
So for example, if my page has a player, somewhere on the page there will be
<div id="jwplayer-1>Player will appear here</div>
What I want to be able to do is to check if that line exist, if it does, insert another div so the code will be like this.
<div id="jwplayer-1>Player will appear here</div>
<div id="viewcount">Total Views: <?php showviews()?></div>
Thanks
You can do:
$('<div id="viewcount">Total Views: X</div>').insertAfter($('#jwplayer-1'));
You could use jQuery's append method if you were to put your div within another div as such:
html:
<div id="container">
<div id="jwplayer-1>Player will appear here</div>
</div>
javascript:
$('.container').append('<div id="viewcount">Total Views: <?php showviews()?></div>');
sources:
http://api.jquery.com/append/
Related
I´d like to change a HTML snippet stored in database.
Let's assume there is only one table called table with columns id and content. In content column are stored HTML snippets
It has this kind of format
<div class="header">etc etc </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
(and possibly more complex html structure).
The goal is to replace the content div (so div with class content, there is guaranteed that there is just one div with this class identifier) from stored string with some text, for example "TEXT" using SQL on PostgreSQL.
So in this case the result would be
<div class="header">etc etc </div>
TEXT
<div class="footer"> footer </div>
Thank you
I'd use REGEX_REPLACE() for this:
demo:db<>fiddle
SELECT
REGEXP_REPLACE(html, '<div class="content">.*?</div>', 'MY TEXT')
FROM t
I would like to get a DIV based on two conditions in children DIVs.
//div//[child::div[text()="Administrator"] and //child::div[text='No card']]
But and condition appears to be working on properties of a single element.
Kindly advise how to achieve something like above, using either Xpath or CSSSelector
HTML:
<div>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carHolderRow-" style="transition: s;">
<h4 class="-shared-react-components1Lsp1">Mr.</h4>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carDetails--3xMqU">
<div class="src-containers-Quo-SimpleCard-components-1bGot">bla</div>
<div class="src-containers-Quo-SimpleCard-components--1bGot">Administrator</div>
<div><button class="src-containers-Quo-simpleCard-" type="button">Edit</button><button class="src-containers-Quo-SimpleCard-" type="button">Delete</button></div>
</div>
</div>
</div>
Many thanks
Basically if you want to select div by text values of two child div elements, you can do
//div[div="Administrator" and div="No card"]
Let me know (update your question) if you faced with another issue
P.S. Note that //div[//child::div[text='No card']] means something like return FIRST div if there is a div with text 'No card' somewhere in DOM, but not what you expect
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I am using Selenium and Java to write a test, I need to check if a web element does not have another web element inside it, for example:
<div><span>bla bla</span></div>
<div><g></g></div>
<div><li></li></div>
I need to select the div tags which does not have <span> inside them, so do we have something like:
//div[not(.//span[text()='bla bla'])]
Please do not tell me how to do it in other ways as I already know, I am just wondering if I can do it in a way like the one above.
Your XPath should've done what you wanted. It will select <div> element that doesn't contain, either direct child or nested, span element with text equals "bla bla". See the demo online : http://www.xpathtester.com/xpath/be01362aa9bb1385da6dcf819cf69376
input :
<div>
<div>
<span>bla bla</span>
</div>
<div>
<g/>
</div>
<div>
<li/>
</div>
</div>
output :
<div>
<g/>
</div>
<div>
<li/>
</div>
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.