In my css style of a div componennt the transform transulate id disabled the style so how to enable it to position ?
SS of problem
solution for style in transform
This is not an answer but this may help you to ask questions on SO to get a reproducible example:
Click on the message-field to post your question and then click ctrl + m to open the snippet maker window.
There's also a button above the message field to open this window : just click on the <> icon.
let txt = document.getElementById("text");
txt.innerHTML = "How to ask a question";
#text{
font-family:sans-serif;
font-size:1.6em;
}
<div id="text"></div>
Related
Here, I am trying to make <p>Lex</p> a hyperlink without using <a> tag and using css, so that on right click of above <p>Lex</p> Open Link In New Tab can be accessed.
Below is Html and CSS
<style>
p{
color:red;
font-size:14px;
}
</style>
<p>LexL Luther</p>
You need to use a tag to make a hyperlink.
You can use _blank to open link in a new tab.
Visit W3Schools!
The target="_blank" does this in the code above.
The <dialog> tag, when opened with showModal(), will display the elements between it and its closing tag while disabling all other elements on the page. My question is: is it possible to override this behavior for a specific element? Example:
HTML:
<div id="container">
<dialog id="myDialog">
<button id="close" type="reset">Close</button>
<button id="create">Add Element</button>
</dialog>
</div>
<menu>
<button id="openButton">Open Dialog</button>
</menu>
CSS:
.new-element {
width: 50px;
height: 50px;
border: 3px solid black;
background-color: blue;
position: fixed;
top: 50%;
}
JS:
const container = document.getElementById('container');
const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('close');
const createButton = document.getElementById('create');
const myDialog = document.getElementById('myDialog');
openButton.addEventListener('click', function() {
myDialog.showModal();
});
closeButton.addEventListener('click', function() {
myDialog.close();
});
createButton.addEventListener('click', function() {
const div = document.createElement('div');
div.classList.add('new-element')
container.appendChild(div);
});
In a JSFiddle: https://jsfiddle.net/y7bkxvd4/
I'd like to find a way to position the blue square on top of the dialog. I realize it would be far easier to just append the new div to the dialog itself, but I've run into this in a situation where overflow was a concern and in using a module that uses react-portal. If it's not possible, cool, I can get behind that. But if it is, I'd like to know.
z-index has no effect, obviously.
The <dialog> element is added to the 'Top Layer' of the dom which has its own stacking order (z-index does not affect this -- it is set strictly by the order by which the elements are added). I don't believe you can manually add elements to this Top Layer, it is done in functions such as showModal(). You can find more information at: https://fullscreen.spec.whatwg.org/#new-stacking-layer but because the feature is still not universally supported its tough finding documentation on it. For example:
To remove an element from a top layer, remove element from top layer.
Real helpful..
A couple work arounds:
Change the added element to a dialog as well and call .showModal() when the element is appended. The problem with this approach is that .showModal() makes all element outside that element unavailable for user interaction. That means that your blue box is on top, but its also means you can't click "Close" or "Add Element" on the other modal. (NOTE: You'll also notice the "Close/Add Element" dialog is greyed out -- you can override this by changing .new-element::backdrop{...} but it still won't the change the fact you can't click "Close" or "Add Element") Example here (with the backdrop removed)
Change the added element to dialog, call .show() when the element is appended, and change the click event for 'Open Dialog' to .show() instead of .showModal. This allows you to also click past the blue box (even though its 'on top'), but it also allows you to click anywhere on the page (kind of defeating the purpose of a modal). The ::backdrop pseudo element is also not available because you are not using .showModal If you take this approach you would need to attach closing the blue box to the "Close" click event handler. Example here
My recommendation is to either use a plugin for modals (such as Bootstrap's) or make your own with the functionality you want (using Javascript). Dialogs are technically experiential technology so it won't be easy trying to get the behavior you want out of the box. This is probably as close as you will get, though you could improve it by adding your own "backdrop".
I have a pdf image inside the anchor tag.I need to get the element and with that I need to click on the pdf link. Tried with element by Id but getting element not visible but it is visible.Kindly help in getting the element through css,struck in this for nearly 2 days.
<div class="az content-block">
<ol>
<li>{{'check.ant.label'|text}}</li>
<li>{{'check.bed.label'|text}}</li>
<li>{{'check.hin.label'|text}}<a id="checkPdfLink" ng-href="{{check.pdf}}" target="_blank"><span class="az icon-pdf"></span></a></li>
</ol>
</div>
Did you try with css Selector? If it is hard to find a unique ID, try right click on the inspect element of the pdf link and click on Copy Unique Selector and try to click on it.
element(by.css('paste your Unique Selector here')).click();
Hope this helps. :)
In a simple case, this is just:
element(by.id("checkPdfLink")).click();
But, since you are getting the "Element not visible" error, there could be several reasons for that. One, is that you may need to actually do something to make the element visible - open up a menu, or a dropdown. The other reason, could be the timing problem. Wait for the link to become clickable before clicking:
var EC = protractor.ExpectedConditions;
var pdfLink = element(by.id("checkPdfLink"));
browser.wait(EC.elementToBeClickable(pdfLink), 5000); // wait up to 5 seconds
pdfLink.click();
I'd like to disable the Comment box that pops up when a user clicks the Facebook Like button ,
I followed the post Facebook Like Button - how to disable Comment pop up? and changed the CSS But it didnt work any other suggestions please
I cant use IFRAME otherwise i would not be able to use FB.Event.subscribe('edge.create',
From http://developers.facebook.com/docs/reference/plugins/like/:
When will users have the option to add a comment to the like?
If you are using the XFBML version of the Like button, users will always have the option to add a comment. > If you are using the Iframe version of the button, users will have the option to comments if you are using > the 'standard' layout with a width of at least 400 pixels. If users do add a comment, the story published > back to Facebook is given more prominence.
Just use the iframe version of the button and set the width to less than 400 pixels.
Just add a style attribute with overflow: hidden
<div style="overflow: hidden !important;" class="fb-like" data-href="<?php echo $url; ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
Place the iframe within a div and use overflow hidden with a width and height that hides anything except for the button.
I tried to change the css from within the iframe but that didn't work for me.
create a custom css class like,
.fb-like{
overflow: hidden !important;
}
mention the class into facebook DIV
That's it...
I have three HTML buttons and when I click on them there is no outer glow and they don't do anything.
I have also tryed to style them but they stay with the default design. I have just used ordinary code I just don't have a clue what's wrong with them
<input type="button" value="Proceed">
<input type="button" value="Cancel">
Don't use , instead use with CSS to create your buttons so they react to touch. It'll require some javascript as even most mobile browsers don't properly map touch events to the CSS :active pseudoclass.
Your "button":
<a class="button" id="yourButton">Button</a>
Some very basic CSS to toggle the background and text color on touch:
a.button {
color:#fff;
border:0px;
padding:5px;
background:#000;
}
a.button-active {
background:#fff;
color:#000;
}
And here's the javascript you would call in your onload on deviceready handler. I'm using xuijs here (xuijs.com), but you can use jQuery or any other javascript to add and remove classes:
x$('.button').on('touchstart', function(e) {
x$(e.currentTarget).addClass('button-active');
} );
x$('.button').on('touchend', function(e) {
x$(e.currentTarget).removeClass('button-active');
} );
This is a very basic example. Once you have this all setup, you can make any changes you want to the CSS to determine how the button will look when it is active and inactive.
Hmmm.. Your question is not that clear. But if you only want a glow in your buttons, you can take a look at how Formalize does it.
Here's a page showing the button glow effect (when pressed).
Update:
Oooops, sorry, missed the "PhoneGap" part. The solution I gave above is only for normal html forms, I don't have experience with using phonegap yet. cheers. :)