it's been a long time ago i last scripted a website i'm just started making a portfolio website to show my photo's, i have al my photo as thumb image on a page and use this script for a lightbox:
https://www.w3schools.com/howto/howto_js_lightbox.asp
it's nice and simple, but it won't work wel with my website layout my mainnav hover over the image and try to prevent this by this script:
// Open the Modal
function openModal() {
document.getElementById('myModal').style.display = "block";
var mainnav = document.getElementsByClassName("hoc clear");
mainnav[slideIndex-1].style.display = "none";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal').style.display = "none";
var mainnav = document.getElementsByClassName("hoc clear");
mainnav[i].style.display = null;
}
now my navigation bar will stay above the image but when you close the image it wont delete the style i gave him?
can some one help me out?
Website http://www.kiekda.eu/p/gallery
You could try changing the z-index of the .modal CSS class to a higher number - change it from z-index: 1; to z-index: 9999;:
.modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
Related
I have a problem based on a similar question that has an answer but does not fit for me. I have an element that is not set up like this class="vote-link up" where it would be easy to make the class to change its attribute because that is just one word where mine is not similar to it.
The HTML code looks like this <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
And I want to remove display: none; which are the two last attribute of the HTML code. Or change it to display: shown; performing one of the options I have shown would give the same result that I want I just don't know how to do it.
i.e this is what i desire, to change the HTML to this <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none;"></textarea>
Just for clarification, display is not an attribute it's one of the properties of style attribute. Here is the reference for more information.
Here are the 2 options to handle your scenario.
Option 1: Update the style display property value to block
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement ele = driver.findElement(By.id("g-recaptcha-response"));
System.out.println("Before updating the property:" + ele.getAttribute("style"));
js.executeScript("arguments[0].style.display = 'block';",ele);
System.out.println("After updating the property:" + ele.getAttribute("style"));
Option 2: Remove the style > display property
JavascriptExecutor js = (JavascriptExecutor)driver;
ele = driver.findElement(By.id("g-recaptcha-response"));
js.executeScript("arguments[0].style.removeProperty('display')",ele);
System.out.println("After deleting the property:" + ele.getAttribute("style"));
I'm using anki and I'm trying to insert "hints" and explantions.
I took a code from this guy on youtube who created just that - the possibility of clicking on a hint symbol that will only then display the content of the hint.
That's the link to the video - https://www.youtube.com/watch?v=Hv0IxQSYZiM
That is the code he wrote that I insert to Anki -
http://pastebin.com/raw/tqWNkeHV
The problem I have is that I've got hint's that have mulitple lines / images in them, and this method won't allow me to show them in a good way. The code will only receive the first line in the "hint" category, and won't hide the rest of the content. It looks like this -
Example
Here is the current code -
{{Question}}
{{#Hint}}
<div id="hint" class="hidden">
<p class="trigger">[ click to show hint ]</p>
<p class="payload">{{Hint}}</p>
</div>
<script>
var hint = document.getElementById('hint');
hint.addEventListener('click', function() {
this.setAttribute('class', 'shown'); });
</script>
{{/Hint}}
And HERE IS THE STYLING -
.card { font: 1.5em/1.5 sans-serif; text-align: center; }
#hint { background: #f2fbe7; border: 1px solid #dff5c4; border-radius: 6px;
color: #7a876b; }
#hint.hidden:hover { background: #dff5c4; color: #000; cursor: pointer; }
#hint.hidden .payload { display: none; }
#hint.shown { background: #fff; color: #000; }
#hint.shown .trigger { display: none; }
#hint.shown .payload { display: block; }
Can anyone help me modify the JAVA / HTML code so I can insert all lines into the hints section?
Thank you very much.
In the third line of {{#Hint}} section, you must change from:
'<p class="payload">{{Hint}}</p>'
to:
'<pre class="payload">{{Hint}}</pre>'
EDIT:
I think I found the problem, I test the application in a window with java 7 and runs fine, no weird symbols and run the application on two different macs with java 8 and fail. I don't believe is the version because java it's supposed to run on any platform equally any theory.
RE:EDIT:
Is the OS!!!!! I just check, in a Windows with java 8 and worked, has to do with the encoding what can I do?? :'(. (I use macOS)
Maybe is only the JavaFX version and could save an old version of JavaFX in the app but don't know how to do that help, please.
END EDIT
I've made a desktop java application using WebView in JavaFX and make my own HTML page and everything worked fine, but suddenly the characters fails and I don't think is the HTML because I put an H1 and look fine but the google maps don't.
The HTML works fine in a browser but fails in java!.
Also, I erase the cookies.
Here is a screenshot
Here is the HTML most copy paste from google api:
<!DOCTYPE html>
<html>
<head>
<meta >
<title> "Vista de Clientes" </title>
<style>
#map {
height: 100%;
}
html, body {
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<h1> hola </h1>
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEYISGOOD&libraries=places"></script>
<script>
// object for the stores
var GreenCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'Lime',
fillOpacity: 1,
scale: 10,
strokeColor: 'green',
strokeWeight: 1
};
// google map instance
var map;
var markers = [];
// function for the initialization
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 21.8857199, lng: -102.3613399}
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location,
draggable: true
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
initMap();
function setMarker(latvar, lngvar, labels){
var marker = new google.maps.Marker({
position: { lat: latvar, lng: lngvar},
map: map,
label: labels || "",
tittle: labels,
icon: GreenCircle
});
}
function setSelfMarker(Geojson)
{
map.data.addGeoJson( JSON.parse(Geojson) );
}
function setPosition(lat, lng)
{
map.setCenter(new google.maps.LatLng( lat, lng ) );
}
</script>
</body>
</html>
I load the code using:
String webPage = this.getFileSrc("VistaClientes.html");
webEngine.loadContent( webPage);
Is a string containing the full html.
The problem here is that there is a bug in the JavaFX webview on Mac. It tries to load some fonts locally and is disallowed. You can workaround this for Google maps by adding the following CSS directive to your <style> tag.
.gm-style-mtc > div, .gm-style > div, .gm-style-cc > div, .gm-style {font-family:sans-serif !important;}
This question already has answers here:
How do you tell if a checkbox is selected in Selenium for Java?
(8 answers)
Closed 6 years ago.
I am trying to get the status of the checkbox, whether checked or not in selenium using java.
Below is the code of the html and the code i have written:
HTML Code::
<div class="icheckbox_square-aero" style="position: relative;" aria-checked="false" aria-disabled="false">
<input id="IAgree" class="icheckbox_square-aero" type="checkbox" required="" name="IAgree" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
</div>
Programming code::
String loc_iAgree = pr.getProperty("iagree_xpath");
//iagree_xpath is declared in properties file as "iagree_xpath = //form[#id='myWizard']/div/section[3]/div[3]/div/ins"
uia.clickOnCheckbox("xpath", loc_iAgree);
code for clickOnCheckbox() method::
public void clickOnCheckbox(String loc_Type, String loc_Value) {
try {
if (loc_Type.equalsIgnoreCase("id")) {
element = driver.findElement(By.id(loc_Value));
} else if (loc_Type.equalsIgnoreCase("name")) {
element = driver.findElement(By.name(loc_Value));
} else if (loc_Type.equalsIgnoreCase("xpath")) {
element = driver.findElement(By.xpath(loc_Value));
} else if (loc_Type.equalsIgnoreCase("linktext")) {
element = driver.findElement(By.linkText(loc_Value));
} else if (loc_Type.equalsIgnoreCase("partiallinktext")) {
element = driver.findElement(By.partialLinkText(loc_Value));
} else if (loc_Type.equalsIgnoreCase("cssSelector")) {
element = driver.findElement(By.cssSelector(loc_Value));
} else {
System.out.println("provide valid locator Type");
}
String value;
if (element.isEnabled()) {
element.click();
value = element.getAttribute("checked");
System.out.println(value);
} else {
System.out.println("element is not present or not enabled");
}
} catch (Exception e) {
throw (e);
}
}
Here the value returns null even if the checkbox is getting checked.
Is there any other way to get the status of the checkbox back to the calling program??
isSelected() in Selenium WebDriver
Link
I am creating my first chat program (with graphics in java) and i am using JavaFx Scene builder to create a GUI that contains of some pictures and then 1 - 2 men who can then chat with eachother.
the idea is that that when ever 1 of the clients that are connected to the server communicates with the other a small speech bubble will show.
My idea was to create this using a textfield that i would then edit in CSS so it will look like a speech-bubble.
how ever i have tried to look for the css style sheet to be able to configure my textfield but so far nothing has worked is anyone able to help me with this? so far the two style sheets ive tried are these:
.speech-bubble {
position:relative;
width: 320px;
padding: 10px;
margin: 3em;
background-color:#FFF;
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}
.speech-bubble p {
font-size: 1.25em;
}
.speech-bubble:before,
.speech-bubble:after {
content: "\0020";
display:block;
position:absolute;
top:-20px; /* Offset top the height of the pointer's border-width */
left:20px;
z-index:2;
width: 0;
height: 0;
overflow:hidden;
border: solid 20px transparent;
border-top: 0;
border-bottom-color:#FFF;
}
.speech-bubble:before {
top:-30px; /* Offset of pointer border-width + bubble border-width */
z-index:1;
border-bottom-color:rgba(0,0,0,0.095);
}
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 200px;
margin: 20px;
width: 275px;
}
.bubble::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
content: "\00a0";
display: block;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate( 45deg );
width: 20px;
}
The problem is when i add this to my textfield it does not change apperance i dont know if i am doing it wrong or if these style sheets does not fit a textfield
Hope someone is able to help me thank you in advance:
This CSS looks like web CSS which is not supported as far as I know. Valid JavaFX css properties generally start with "-fx". There is a reference here:
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
Make sure you have the speech-bubble CSS class on your text field controls. Try adding changes one by one and checking the result in SceneBuilder. When I try and make too many changes at once one of them inevitably doesn't work.