I have two DIV elements. Inside DIV_1 i want certain images to be display when called upon, in DIV_2 i will have many LINKS.
When each individual LINK in DIV 2 is hovered I want the link-related image to appear in DIV 1, then change to another pic if another LINK is hovered, but also make it disappear when the mouse arrow doesn't hover over the specific LINK.
Javascript
function showIt(imgsrc)
{
document.getElementById('bottle').src=imgsrc;
document.getElementById('bottle').style.display='block';
}
function hideIt()
{
document.getElementById('bottle').style.display='none';
}
Add to your links this code :
<a href="#" onmouseover="showIt('some_image.jpg')" onmouseout="hideIt()" >...</a>
However it wont look pretty. Consider using jQuery.
EDIT:
Using jQuery you could do this way:
HTML:
<a href="#" data-src="some.jpg" class="changeImage" >...</a>
<a href="#" data-src="another.jpg" class="changeImage" >...</a>
...
<img class="bottle" />
JavaScript
$(function(){
$('.changeImage').hover(function(){
$('.bottle').attr('src',$(this).attr('data-src'));
$('.bottle').show();
},
function(){
$('.bottle').hide();
});
})
You can adjust animation speed by providing animation time as argument to show() and hide().
URL for images put in data-src attributes of a tags.
An alternative that you might consider would be setting the background-image property in CSS and then adding the :hover pseudo-class to change to the new image, saving you from having to deal with Javascript at all.
Using the transition property, you could even add a fade between the two images with no additional work on your part, or the need to include another library like jQuery.
Here's some simple jQuery you could use:
$('#DIV1').delegate('a', 'mouseenter mouseleave', function (e) {
if (e.type === "mouseenter") {
switch ($(this).attr('href')) {
case "#link1":
$('#DIV2').html('<img src="image1.jpg" />');
break;
case "#link2":
$('#DIV2').html('<img src="image2.jpg" />');
break;
}
} else if (e.type === "mouseleave") {
$('#DIV2 img').fadeOut();
}
});
jsBin demo
if you have something like this:
<div id="images">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />
</div>
<ul id="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
#images img{position:absolute;display:none;}
than you need just this:
$('#links li').on('mouseenter mouseleave',function(e){
$('#images img').stop().fadeTo(300,0); // do on mouseenter and mouseleave
if(e.type=='mouseenter'){ // do just on mouseenter
$('#images img').eq( $(this).index() ).stop().fadeTo(300,1);
}
});
Related
I want to show a WebPage on another WebPage using InlineFrame.
I initialized it like this:
Wicket/ Java:
InlineFrame choosenTestcaseInlineFrame =
new InlineFrame("inlineFrame", AuthenticationPage.class);
public WhatToDoPage() {
Form whatToDoForm = configureWhatToDoForm();
add(whatToDoForm);
add(choosenTestcaseInlineFrame.setOutputMarkupId(true));
add(choosenTestcaseInlineFrame);
}
'
HTML:
<iframe wicket:id="inlineFrame" style="margin-left: 200px; height: 500px; width: 1000px">
The Problem is That the InlineFrame seems to refuse to show the Content.
here is a Screenshot:
I don't know if Chrome has a specific option to allow iframe to be displayed, but you might find some clues to solve the problem here:
iframe refuses to display
I'm trying to create some e-mails via automation but I'm stuck at;
https://app.tutanota.de/#register
<div class="record">
<div class="recordName"></div>
<div class="formAction">
<button class="single fontImage confirm disabled" type="submit" data-bind="css: { disabled: !isCreateAccountPossible() }, lang: 'createAccount_action'">Hesap oluştur</button>
<button class="single" data-bind="fastClick: login, lang: 'backTologin_action'">Giriş'e dön</button>
<label class="recordStatus invalid" data-bind="lang: getCreateAccountErrorMessage()">Lütfen bir şifre giriniz.</label>
</div>
</div>
But I cannot even locate or click this button
<button class="single fontImage confirm disabled" type="submit" data-bind="css: { disabled: !isCreateAccountPossible() }, lang: 'createAccount_action'">Hesap oluştur</button>
I tried with xpath and classname like;
driver.findElement(By.xpath("//button[#type='button' and #class='single fontImage confirm']")).click();
driver.findElement(By.classname("single fontImage confirm"));
and I tried like ;
driver.findElement(By.cssSelector("...(divs and classes until I reach button classname like #somediv .someclass #anotherdiv .anotherclass .single fontImage confirm)"));
Also, this button class is changing when you put informations like mail and password but untill that point its class name is single fontImage confirm disabled after putting informations its class becomes single fontImage confirm
I know this is really basic question but I tried lots of things to get it work but no luck. Any help is appreciated. Thanks !
All your locators are incorrect. The first by.xpath issues are at button type and class. The button type is 'submit' and class should use contains instead of equal. The second by.classname is incorrect because 'disabled' is missing. I don't understand the third cssSelector.
You can use cssSelector:
By.cssSelector("div.formAction > button[class*='single fontImage']");
or XPath:
By.xpath("//div[#class='formAction']/button[contains(#class,'single fontImage')]");
The most convenient way of selecting element by CSS classes is using CSS selector :
div.formAction > button.single.fontImage.confirm
The above selector will find div element with class formAction, and then return child element button containing all but not limited to the following classes: single, fontImage, and confirm.
I have a number of buttons like this:
<button data-pjax class="btn btn-inverse" type="button" onclick="location.href='http://mybuttonurl.com'">my button</button>
And a number of urls like this:
<a data-pjax href="http://mylinkurl.com">My url</a>
I want PJAX to work on both the buttons and the links. This code works for the links:
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content');
So does this:
$(document).pjax('a', '#pjax-content');
I can't seem to get it working for buttons and links. Even this won't work for buttons alone:
$(document).pjax('button', '#pjax-content');
How can I get this to work?
Note: when I say "won't work" it means the page does a full refresh rather than just load the HTML content into #pjax-content.
As I am using Twitter Bootstrap I ended up replacing the button with a link:
<a data-pjax class="btn btn-inverse" type="button" href='http://mybuttonurl.com'>my button</a>
I believe this is a better way to do what I was trying to do + PJAX works cross browser this way
I've the current situation:
Have a Link in some HTML page.
When the user click that Link, an NORMAL (vs Ajax) HTTP request is being sent to a Web Server (typically a Java Servlet)
After that, of course the browser will bring the contents from the server and start rendering it. (actually it's the same page with modified contents - don't ask me to do it in ajax, cause it is the requirements)
Before step 3 is being done (while the page is being loaded) I need to display some frame to the user saying something like loading ....
Well, just populate a div somewhere on the page with "Loading..." when the link is clicked. Here's some rough code
$('#yourlink').click(function(){
$('#loading').html('Loading....');
});
<div id="loading">
</div>
And when the page loads, the current loading div will be replaced with an empty one, this will signify that the loading is complete.
Another approach:
The css
#loading
{
display: none;
}
The html
<div id="loading">
Loading....
</div>
The js
$('#yourlink').click(function(){
$('#loading').show();
});
Well, there's several non Ajax ways to do this. The simplest I guess would be to have a giv animated image with your loading bar, which you keep in a hidden div in your initial page:
<div style="display:hidden;"><img src="/img/loading.gif"></div>
Then add some javascript to the link/button that submits the page, such as when it is clicked it unhides the div with image.
There are many ways to do this. I handle it something like this:
// Any anchor with showOverlay class will invoke the overlay function
$("a.showOverlay").click(function() {
overlay();
});
// Normal form submits are intercepted. Overlay call also be skipped by
// making the form of class "noOverlay"
$("form").submit(function() {
var skipOverlay = $(this).hasClass("noOverlay");
if(!skipOverlay){
overlay();
}
return valid;
});
// This overlay function uses the blockUI plugin, other methods can also be used
function overlay(){
$.blockUI({
fadeIn: 500,
css: {
height: '150px',
top: '35%'
},
message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>'
});
}
I want to use .slideToggle to open event details from my calendar (in iframe) My code is:
<div id="clickme"><iframe id="frame" src="index.php?option=com_jevents&view=month&task=month.calendar&template=ja_purity" mce_src="index.php?option=com_jevents&view=month&task=month.calendar&template=ja_purity">Your browser does not support iframes.</iframe></div>
<div id="book" style="display:none;"><iframe name="details" scrolling="no" frameborder="0"></iframe></div>
<script>
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
You can see how it works here: wisko.pl
Now slide work only when i click iframe border. I'd like it to open when i click on event in calendar. Is it possible? How can i use .click function to check divs inside iframe?
Update:
Thank you. Still doesn't work. Am I doing something wrong? My main document has:
<script>
function showevent(){
$('#book').slideToggle('slow', function() {
// Animation complete.
});
}
</script>
In Iframe i put:
<script>
$('#eventstyle').click(function() {
document.parent.showevent();
}
</script>
in main document:
function showevent(){
$('#book').slideToggle('slow', function() {
// Animation complete.
});
}
inside iframe:
window.parent.showevent();
running this inside iframe will cause the function to run. And you have to catch the click event inside the iframe - you can't otherwise.
edit:
1. My bad: i put document.parent here instead of window.parent - fixed now
2. Your bad: when you use jquery to assign click events to things, you have to be sure these things already exist. all jquery code should be wrapped in $(document).ready(function(){/*your code here*/}); That's why it had no chance of working for you.