Here's a picture of the problem: http://i55.tinypic.com/29g0izc.jpg
Problem Site: http://windowsphonedaily.blogspot.com/
I have my tweet and like button setup at the header of each new article underneath the title. It works extremely well with Chrome and Firefox. But I noticed that in IE9 both buttons are forced to the left and that the actual tweet button is missing. You can see in the above picture the comparison between FF4, Chrome 11, and IE9.
Does anyone know how to fix this without breaking it in the other browsers? Here is the code I have used to set up the buttons.
<div class='post-header'>
<table>
<div class='post-header-line-1'/>
<!-- Facebook's Like Button -->
<div style='float:right;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='arial' href='' layout='button_count' show_faces='false' width='10'/></div>
<!-- Twitter's Tweet Button -->
<div style='float:right;'><a class='twitter-share-button' data-count='horizontal' data-via='WinPhoneDaily' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span></table>
Related
How to click on a collapsible nav bar in selenium webdriver?
<div id="termsandconditions" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group" app-field-wrapper="terms_text">
<textarea id="terms_text" name="terms_text" class="form-control tinymce" rows="4"></textarea>
</div>
</div>
</div>
I have tried it through XPath but element not clickable at(x,y) arrives.
You could try clicking with Javascript to bypass the ElementNotClickable error you are seeing:
menu = driver.find_element_by_xpath("//div[contains(#class, 'panel-collapse')]")
driver.execute_script("arguments[0].click();", menu)
Some elements do not accept regular Selenium click() method, so we use Javascript occasionally to work around these special elements.
Hope this helps a bit.
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 the (pretty cool) so far Framework7 lib for an hybrid mobile app...but I came to an issue.
In the JS, I've put a line for the swiper
var slider=new Swiper(".swiper-container");
In the HTML, I have a page inside a view that is like this
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content-block">
<div class="creator" style="float:left">
<img src="http://onexchange-dev.azurewebsites.net/image/julien_boyreau.jpg">
</div>
<div style="float:left;margin-top:2%;margin-left:2%">Julien Boyreau</div>
<div style="float:right;width:20%">Trust</div>
<br>
</div>
<div class="content-block">
<div class="content-block-inner">
<h2>Can we save the Internet ?</h2>
<img style="width:100%" class="teaser" src="http://www.savetheinternet.com/sites/default/files/styles/1275_wide/public/topics/topic_internet-freedom.png?itok=O7Tiv8Vv">
<p>
Back in 1964, in a time of cold war, Paul Baran invented packet-switching communications. This paved the way to a radically new way of distributed communications and a formidable move to democratization.
</p>
<p>
10 years later, Bob Kahn and Vint Cerf standardized eventually this approach with TCP/IP protocols. This provided a common stack onto which one could build at the edge whatever applications, where the network would only transmit the packets.
</p>
<p>
15 years later, Tim Berners-Lee built one of these applications, WWW. Many have forgotten that this was half the coin of what he was working on, the consumption part, leaving aside the other half, the creation part, who was baked into ENQUIRE.
</p>
<p>
In the next 15 years, the Internet grew on top of these technologies, thanks to decentralized PCs to start the digital revolutionnary era.
</p>
<p>Since then, the Internet has mostly moved backwards.</p>
<p>
ISPs, having never accepted the logical consequence of Baran’s invention (the best IP network is the dumbest one), have focused their profits to integrate upward to “Services” and “Content” instead of downward to faster & cheaper & more pervasive utilitarian IP service (In 2016, IPv6 is still not pervasive and I have no 4G in Paris’ subway).
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<p style="text-align:center">Slide 2</p>
</div>
</div>
</div>
</div>
</div>
When I load that, I can see my first slide, but if I swipe to the right, I don't have any effect : the second slide is coming but attached to my finger, like if the 2 swiper-slide was sticked.
Even more bizarre, if I put this in the page :
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slide 1
</div>
<div class="swiper-slide">
<p style="text-align:center">Slide 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't swipe at all anymore to see the "slide 2".
Does anybody have a clue to help me ? It's driving me nuts...
Thanks for your help,
J.
If your slider is in index page. then you need to call update swiper to work. You have intialised swiper in js. u can also do the same in html too. for update the swiper you can use below code
$$('.swiperTab').on('show', function(){
$$(this).find('.swiper-container')[0].swiper.update();
});
Here swiper tab is the class name for swiper container.
It should work fine.
Well, first thing that is obvious is that you miss swiper pagination. If this doesn't help, it might be a second carousel on the same page. Don't have other ideas and the code is insufficient for an exact resolution
So I've seen the question asked a couple of times and eric martin answers with this:
I did the same thing on a site I'm building. I just created different content for each modal and gave each one a unique ID. So my content looked something like:
<a id='help'>HELP CONTENT</a>
<a id='about'>ABOUT CONTENT</a>
<a id='options'>OPTIONS CONTENT</a>
<div id='modal_help'>HELP CONTENT</div>
<div id='modal_about'>ABOUT CONTENT</div>
<div id='modal_options'>OPTIONS CONTENT</div>
Then in my JS, I have:
$('a').click(function (e) {
e.preventDefault();
$('#modal_' + this.id).modal({OPTIONS});
});
Hope that helps.
So, looking at the modal example demo:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
I don't understand how to call a 2nd modal box on the same page. I know this is a newbie question, but it's confusing the heck out of me.
Thanks!
It would be more helpful to have a real example (simplified) of what you are trying to do. But, going with the demo code you provided, you could do the following:
HTML:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<!-- added id -->
<a href='#' id='osx-modal' class='osx'>OSX Modal</a>
<!-- new link for second modal -->
<a href='#' id='second-modal' class='osx'>Second Modal</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
<!-- content for second modal -->
<div id="second-modal-content">
contents of second modal
</div>
</div>
JavaScript:
$('a.osx').click(function (e) {
e.preventDefault();
$('#' + this.id + '-content').modal({OPTIONS});
});
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.