ive been working on a page builder and have run into this double quote problem.
div id="set" style="color:black;font-size:12px"
document.getElementById('set').style.backgroundImage="url('editor.png')"
or
document.getElementById('set').style.backgroundImage="url(editor.png)"
This sets in firefox and IE
div id="set" style="url("editor.png");color:black;font-size:12px"
When The page is saved and reloaded the double quotes break up the style.
Does anyone know a work around for this problem?
i think problem is here - url("editor.png")
<div id="set" style="url("editor.png");color:black;font-size:12px">
try this
<div id="set" style="background-image :url('editor.png');color:black;font-size:12px">
Related
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.
Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan
Button element is getting focus, only issue is with anchor tag
<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>
Any valuable inputs will help me. Thanks in advance.
You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:
<a target="_blank" href="https://www.linkedin.com/">
<span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>
The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.
I'm trying to create a very simple and light wysiwyg editor using designMode/execCommand, eg:
$(document).ready(function() {
wysiFrame.document.designMode = 'On';
});
<iframe name="wysiFrame" id="wysiFrame"></iframe>
When I enter text in the iframe it is not wrapped in any tags. When I hit return the new line is wrapped in a div, eg:
here's my bit of text
<div>and this is the text after hitting return</div>
If I add:
$('#wysiFrame').contents().find("body").append('<p>Select me and type</p>');
and then select the text and over type the tags are added (in Chrome at least) as expected, new paragraphs and line breaks.
I tried:
$('#wysiFrame').contents().find("body").append('<p></p>');
But that gave me:
My typed text
<p></p>
Is there a way to wrap entered text within paragraph tags? I have trawled online but have only been able to find reference to preventing line breaks in favour of paragraph tags.
All help, suggestions and ideas welcome.
Thanks in advance.
Managed to get something together that although not elegant may be useful to others looking for a no-fuss, simple (dirty!) solution. In my 'designMode = 'on' function I added:
$('#wysiFrame').contents().find("body").append('<p> </P>');
When you click in the iFrame the insertion point lands between the space and the closing paragraph tag, just a little clean up needed server-side. Tested in Chrome, Safari and Firefox, seems to work reliably in all.
Any other suggestions out there?
I was trying to disable the loading spinner, as it hangs on some browsers.
I found an existing solution, which definitely works. This line:
data-setup="{"children": {"loadingSpinner": false}}"
Problem is this code addition changes the skin of my player.
Spinner disabled, new skin: http://thinkmad.com/s/projects/little-racer-dancing/
Old skin:http://thinkmad.com/s/projects/parachute-youth-count-to-ten/
Both still have:
class="video-js vjs-default-skin"
Anyone know how to fix this so all my skins are consistent?
Alex
In your video tag you have data-setup="{"children": {"loadingSpinner": false}}" change this to use single quotes ' around your data-setup attribute like so
data-setup='{"children": {"loadingSpinner": false}}'
your code is closing the attribute with just {
When I use single quotes instead of double quotes, the progress spinner returns and the original problem persists:
http://thinkmad.com/s/projects/little-racer-dancing/
I'll also mention this is a video that is 720p but on the page I've resized it to 640x360. Not sure if that matters.
Please don't make comments regarding why i posted a similar question. I have tried many things and nothing is working. Below is the HTML
<div id="businessSettingsColumn1">
<div class="sectionLink">
Business details
</div>
<div class="sectionLink">
Operating hours
</div>
<div class="sectionLink">
Closed dates
</div>
<div class="sectionLink">
Appointment notifications
</div>
I need to click the second link
I have tried
1) webdriver.findElement(By.partialLinkText("Operating hours")).click();
2)webDriver.get(mylement.findElement(By.tagName("a")).getAttribute("href"));
3)
List<WebElement> businessLinks= busCol.findElements(By.className("sectionLink"));
for(WebElement bLink :businessLinks) {
if(bLink.getText().contains("Operating hours")) {
bLink.findElement(By.tagName("a")).click();
}
}
4) Using the Action builder to move the mouse and then doing a click
Also when i did this 3 times in a row , my element got clicked
webdriver.findElement(By.partialLinkText("Operating hours")).click();
webdriver.findElement(By.partialLinkText("Operating hours")).click();
webdriver.findElement(By.partialLinkText("Operating hours")).click();
I am using Firefox version 25.0 and Selenium version 2.35.0. Funny thing though is when i do a sysout , the values get printed and when i try to get the url using webdriver I get "Element not found in the cache - perhaps the page has changed since it was looked up" .. its pretty much a static page with links only so i dont understand why i am not able to click it.. Any help will be much appreciated.
Can you try calling focus() on the element before you click on it?
This usually occurs because the element was there at some point, but then something happened and then it's no longer there for some reason. I encounter this frequently when a page makes AJAX calls for example.
Have you tried adding some waits so that selenium is sure that the element is ready?