I'm changing a script (found on www.dynamicdrive.com) for being used with Jquery 1.4, so I could use it within Drupal 7. My version of it is live at http://screamingsilence.be/js/touchGallery/
All is working well, but when I view it on my Android tablet/smartphone, the images gets selected and that doesn't look very pretty.
I tried this code, but this doesn't help:
$('img').attr('unselectable','on').bind('selectstart', function(){ return false; })
apply the following css style on the images parent / container:
-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
hope that helps.
Related
I am trying to remove through CSS the scroll bar that appears by default on Elementor on a Pop Up.
Can someone help ?
https://www.onservatory.com/recursos-gratuitos/
I tried different things based on similar questions but doesnt seem to work.
.dialog-message dialog-lightbox-message::-webkit-scrollbar {
display: none;
}
or
#elementor-popup-modal-21529 > div > div.dialog-message.dialog-lightbox-message {
overflow: hidden!important;
}
I thought maybe I can't do it trhough CSS because the pop up shows later but then I tried to create a listener like
<script>
(function() {
// Use events from https://developer.mozilla.org/en-US/docs/Web/Events
var eventName = 'elementor/popup/show';
// Attach listener directly to element or document if element not found
var el = document.querySelectorAll(".dialog-lightbox-message")[0]||document;
// Leave useCapture to true if you want to avoid propagation issues.
var useCapture = true;
el.addEventListener(eventName, {{JS - Popup Event callback}}, useCapture);
})();
</script>
using the following documentation https://developers.elementor.com/elementor-pro-2-7-popup-events/ but doesn't work neither.
Can someone help ?
Thank you!
I guess you are talking about the scroll bar on the <body>. if it is the problem, then you need to set the overflow property as overflow: hidden for the <body> tag it can be done by both CSS and JS.
I think there was an issue with the cache of the browser/cdn.
I think now it's working.
I created a new ticket on hot to avoid caching for the experts! Thank you!
Caching on wordpress and pagebuilders
Apologies for my mistake.
Thank you!
Use this for Chrome and Safari:
.elementor-popup-modal .dialog-message.dialog-lightbox-message::-webkit-scrollbar {display: none;}
For Firefox use this:
.elementor-popup-modal .dialog-message.dialog-lightbox-message { scrollbar-width: none; }
Add it to your Popup Settings > Advanced > Custom CSS
screenshot: https://snipboard.io/PeDl18.jpg
"Use this for Chrome and Safari:
.elementor-popup-modal .dialog-message.dialog-lightbox-message::-webkit-scrollbar {display: none;}
For Firefox use this:
.elementor-popup-modal .dialog-message.dialog-lightbox-message { scrollbar-width: none; }
Add it to your Popup Settings > Advanced > Custom CSS
screenshot: https://snipboard.io/PeDl18.jpg"
_____ This Works!
I've been working on a website and when testing it out on a VM the slide menu didn't work. I've since managed to replicate the error in newer versions of Chrome The page is
http://paperfromabc2xyz.co.uk/
When you shrink the screen size small enough to loose the main menu you'll get a NAV Burger icon. Clicking this should slide a menu in. The Javascript file is 'App.JS'
The click does not get caught, somehow because the span does not have dimensions (the :before element does not expand it).
Add this to your styles:
span.Burger{ display: inline-block; }
for a start use a library as Jquery to simplify your code; then put your javascript code in an $(document).ready(function () {} then then add to your css : span.Burger{ display: inline-block; }
I'm trying to style the active state of jQuery spinner buttons like this:
.ui-spinner .ui-spinner-button:hover {
background: #FF0;
}
.ui-spinner .ui-spinner-button:active{
background: #0FF;
}
Hover is working, but active is not. See jsfiddle example here.
Please excuse the ugly colors - just have those for simplicity's sake.
Update: the issue is primarily in Firefox - it doesn't present itself in Chrome
I dont know how to do it in css tried some options but they dont work but i managed to solve it in jquery give it a try
$(".ui-spinner .ui-spinner-button").click(function(){
//background you want to be in active state
$(this).css("background","#111");
//reverse the background in 0.1 second
setTimeout(function(){
$(".ui-spinner .ui-spinner-button").css("background","#fff");
}, 100);
});
it works both in firefox and chrome, but you should remove the :active from css since it's going to work in chrome and you will get a mix of active state with the color specified in css and the one in jquery
It looks like jQuery's background image is taking precedence over background color in Firefox. Try this:
.ui-spinner .ui-spinner-button:hover {
background-color: #FF0;
background-image:none;
}
.ui-spinner .ui-spinner-button:active{
background-color: #0FF;
background-image:none;
}
Just replace :active pseudo-selector by :focus. See here: http://jsfiddle.net/xvWG5/92/
PD: I also replaced type="submit" by type="button" so I stay on the page.
Your new fiddle get fixed the same way. Checked: http://jsfiddle.net/xyb9fr35/2/
Same thing: replace :active by :focusand use #testSpinner as a selector instead of the class because that class is not in the DOM when the css is applied.
I'm currently coding and programming a website using Ruby on Rails but having some issues with a fairly basic element within the page. Basically, my backend system will contain a color that will change each month, that color is then pulled and used throughout the website for multiple elements. This is one of those elements...
I have a div with an image inside that will soon be a link. I want to use JS or JQuery to make this element change it's background color on hover. I know it's simple but, for some reason, I can't figure this out. I'll include a jsfiddle of the entire setup:
HTML:
<div class="contribute_buttons">
<img src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png">
</div>
CSS:
.contribute_buttons {
width: 300px;
height: 39px;
float: left;
background-color: #393839;
margin-top: 5px;
margin-bottom: 15px;
}
JAVASCRIPT:
$(document).ready(function() {
var colorOrig=$(".contribute_buttons").css('background');
$(".contribute_buttons").hover(
function() {
//mouse over
$(this).css('background', '#AAEE00')
}, function() {
//mouse out
$(this).css('background', colorOrig)
});
});
http://jsfiddle.net/EQeMs/
Thanks in advance for the help!
You can do this with just CSS using the :hover pseudo-class:
.contribute_buttons:hover {
background-color: #AAEE00;
}
Working Demo
Otherwise, your jQuery is fine. It looks like you just forgot to import jQuery in your jsFiddle example.
Load jQuery in the Frameworks & Extensions menu on the left and this fiddle works fine. $ is the jQuery function and when you see it it means that jQuery is required.
However, unless you're targeting IE below version 7 I would just use the pure CSS solution with :hover
I have a simple list : example : http://www.w3schools.com/html/html_lists.asp
I am using Mozilla Firefox (version 3.6 but I think version does not matter). When I click (single) on the bullet, the list item gets selected(highlighted).
Is there a way to disable this highlighting (without removing the highlighting forever using -moz-selection)?
This behavior is not seen in Chrome or IE.
Another example : (with list-style-image) : http://www.sendesignz.com/Demo/jQuery/expanding_list_item/expanding.html
Is there a way in plain javascript or jQuery or css to disable this auto selection in FF?
It's functionality implemented by Firefox as you could tell, while I don't know of any true way to remove the functionality there is a CSS workaround you can do.
Wrap all contents of the <li> in a <span>, and then using margin, padding and absolute positioning to position the span over the list item.
HTML
<ul>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ul>
CSS
li span{
margin-left: -50px;
padding-left: 50px;
position: absolute;
}
You can use the mozilla css parameter
CSS
li {-moz-user-select: none;}
The selection seems to be related to the mousedown event. You can block it by stopping the event. For exemple in jQuery :
elt.mousedown(function(event){ return false; });