I need to turn the products listed in http://srougi.biz/gb/portfolio_listing/ into non-clickable items, but without loose its overlay effect. And since its a wordpress site, that I can't change the code, my only option is do it with CSS. I've tried to put pointer-events:none and cursor:default in the image, but it lost its overlay effect. I will appreciate your help.
we don't have a option to handle the events in css. use this jquery snippet to fix
$('.isotope-item .thumbnail a').click(function(e) e.preventDefault();
});
To deactivate the links in this case, you need to add some javascript code.
JS: Add this before </body> in the theme file: footer.php
<script>
var thumbnails = document.getElementsByClassName('thumbnail');
for(i = 0; i < thumbnails.length; i++){
thumbnails[i].getElementsByTagName("a")[0].setAttribute("onclick", "return false;");
}
</script>
CSS: Style to remove pointer from link.
.thumbnail a {
cursor: default !important;
}
Related
Here's my website http://tapash.atwebpages.com/
As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks
I have seen that you already use jQuery on your website. This makes it very easy to implement.
Give your image an ID for JavaScript:
<img src="LOGO_WHITE" id="test" />
Execute a function on scrolling:
$(window).scroll(function (event) {
...
});
When scrolling (your header turns white), a different image should be set:
$("#test").attr("src", "LOGO_BLACK");
But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
}
Your function should therefore look like this:
$(window).scroll(function (event) {
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
} else {
$("#test").attr("src", "LOGO_BLACK");
}
});
Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/
It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
adding a new class defined in external style sheet
modifying its own class of stripe-button in external style sheet
and editing it inline with style=""
But I cannot get the button to change its style.
It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
Button with default style:
Does anyone have experience with this?
(I'm integrating into Ruby on Rails if that makes any difference.)
None of those worked for me. I ended up hiding the button in javascript and making a new one.
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
Search for this class:
.stripe-button-el span
I think this is where you have to modify your own button's style.
You may overwrite it within your own external css file.
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
You should use data-label its part of the regular stripe Checkout API:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
Using jQuery, you can also simply scale the button like this:
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
You can remove the button styles with Jquery and add your own. Worked a charm for me:
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
The .stripe-button-el span actually works.
But you need to add !important in CSS to overwrite the default CSS.
You can try this,
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
For those of you who want to change the background color of the button, make sure you do something like
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
I am writing a GreaseMonkey script that sometimes creates a modal dialog – something like
<div id="dialog">
Foo
</div>
. But what can I do if the site has something like
#dialog {
display: none !important;
}
? Or maybe the owner of some site is paranoid and has something like
div {
display: none !important;
}
div.trusted {
display: block !important;
}
because he doesn't want people like me adding untrusted content to his page. How can I prevent those styles from hiding my dialog?
My script runs on all pages, so I can't adapt my code to each case.
Is there a way to sandbox my dialog?
Actually a very interessting problem, here is another approach:
adding an iframe and modifying it creates a seperate css space for you (your sandbox)
look at this jsfiddle example: http://jsfiddle.net/ZpC3R/2/
var ele = document.createElement("iframe");
ele.id = "dialog";
ele.src = 'javascript:false;';
ele.style.height = "100px";
ele.style.width = "300px";
ele.style.setProperty("display", "block", "important");
document.getElementById("dialog").onload = function() {
var d = document.getElementById("dialog").contentWindow.document;
// ... do your stuff within the iframe
};
this seems to work without problem in firefox.
now you only have to make sure that the iframe is untouched, you can do this they way i described in my 1. answer
just create the div like this:
var ele = document.createElement("div");
ele.style.setProperty("display", "block", "important");
that should overwrite all other styles afaik.
look here, it seems to work: http://jsfiddle.net/ZpC3R/
I'm a beginner at all this however i will do my best to explain.
I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.
I used the following code:
CSS:
.imgA1 {
position:absolute; top: 0px;
left: 0px; z-index: 1; } <br> .imgB1 {
position:absolute; top: 0px; left:
100px; z-index: 3;
}
HTML:
<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!
All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.
I hope all this makes sense.
Anyway help/advice would be fantastic.
Kind regards,
Steve
What i want to do is add a link to the "imgB1" section above...
Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.
< img class=imgB1 src="images\headings\red_heading_email.jpg">
Now clicking on the image will launch site visitors default mail client with "to" the mail address "myname#mail.com".
I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:theemail#address.com
<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me#me.com'>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>
You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.
i think what you want is:
< img class=imgA1 src="images\headings\red_heading.jpg">
< img src="images\headings\red_heading_email.jpg">
with the same css. this should apply the positioning to the anchor tag, which in turn contains the image you want to overlay.
Andy
it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:
$(document).ready(function() {
$('.imgB1').each(function() {
$(this).prepend('<a href="link_to_point_to">');
});
});
Note that I've not tested it
If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:
<script type="text/javascript">
function sendEmail() {
var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
var user = "test";
var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto
var mailto_link = 'mailto:' + user + '#' + domain + '?subject='+subject;
win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
if (win && win.open &&!win.closed) win.close();
}
</script>
<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>
< img class=imgA1 src="images\headings\red_heading.jpg">
< img class=imgB1 src="images\headings\red_heading_email.jpg">
You can't have a link through a CSS class because CSS only defines DISPLAY/LAYOUT properties.
You will have to add an html anchor tag to the img.
By default, images that are hyperlinked will have a border around them (usually blue). Make sure to remove it via css or with the IMG attribute border="0"
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.