Link: http://up8.431.myftpupload.com/services/
I need to turn the section on the page above into clickable buttons. I'm using WordPress with the elementor plugin installed.
I've already added some extra CSS to make the sections appear to clickable. I just need to add the actual functionality. I understand this is done with javascript. I haven't tried adding any javascript code yet. I'm a little hesitant too because I don't think I have the skill and knowledge to do it properly. I don't want to just start adding code everywhere. Past experience has thought me that's a bad idea.
I'm hoping someone experience with elementor can help me out. Here's where I'm stuck:
Where do I add the javascript? There's nowhere for me to add javascript like there is a section for CSS for each element. Should I add it in the customizer (Appearance --> Customize --> Custom CSS/JS)? Should I get a plugin for custom javascript? I've already given each element a custom class. I could attach some JS to these classes.
EDIT: Thought about it a little more. I don't think adding the JS in the Customizer is the way to go. I'm thinking any CSS/JS I add there should be exclusive for the topbar, header, and footer. My reasoning is because these are the sections that will show up the exact same way on each page.
That leaves me with the option of getting a JS plugin. Is this the best way?
What would be the best way to accomplish what I need to. I definitly don't have the skill to understand the Elementor Developer Docs. It's way too advanced for me. That's why I'm asking here.
Thx in advance
if you know how-to and it's through javascript you can do it this way:
Drag and drop HTML widget-> insert your js between script tags.
I recommened using html in your footer(made with elementor) so the script will be available in entire site.
I managed to find a way to do so without any plugin or js, just CSS:
First we need to set a minimum height for our Section/Column (I set 50vh);
then we have to add an element which has link/a tag (e.g. Title Widget) and set a CSS class for that (in my example .mhdizmni_title);
now we have to write a bit of css:
.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
Related
I'm using addthis.com to generate social media share buttons, however, their buttons come with an animation on hover which I really don't like and would like to remove it if possible.
You can see the issue live here - http://onyx.space/image/4
The problem is that the only code I've been given is this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b50a10e742393c0"></script>
And the code for the buttons:
<div class="addthis_inline_share_toolbox"></div>
There is some customization on their website, however, there's nothing about animations. I've googled this issue and found nothing about it.
I wonder whether the animation comes from the JavaScript and how would I go about finding it and removing it.
you can override that animation with more specific selector. for example add below css code in your css file
div .at-resp-share-element .at-share-btn:focus,
div .at-resp-share-element .at-share-btn:hover {
transform: none;
}
So I'm trying, through whatever way possible, to modify the Facebook Like Box's CSS. I've found the offending value and I want to change it. This is inside of an iframe.
The CSS is this:
.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}
This is causing there to always be a scrollbar on the Like Box stream, which I really, really don't want.
I'm not seeing anyway to modify this - not the Javascript SDK (which is my best hope, I think), not through using Javascript or jQuery on it (as it creates an iframe, this is impossible, as far as I can tell - even though Firebug lets me change this).
Obviously the best solution would be to be able to set a style using CSS, but that also seems impossible.
Is there any way to fix this?
I've tried to load the iframe with no scrollbars, but that's just on the outside of the iframe - this is obviously internal.
All I want is for this class to be set to overflow: hidden;
It is not possible to change the CSS of the official Facebook Like Box because it is an external iframe.
Read more in this duplicate.
Since the content you want to change via CSS is in an iframe, you can inject a style into the iframe. But as Vector said, know what you are getting yourself into.
You can create your own "Like" button - without like count (but you can fix this) and then use JS API to "like" URL's
If you set !important then it will over rule any other CSS applied to the element
.pluginLikeboxStream {
overflow: hidden !important;
}
!important should only be used in circumstances like this.
EDITED
To apply it to the iFrame you need to use jQuery
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});
This is how i've always done it.
I have a featured slider on my homepage that I had rigged to be completely hidden if javascript is disabled. I had a script that would then display the featured slider if javascript was enabled.
document.write('<style type="text/css">#JQuerySlider1Container{ display: block !important;}</style>');
Apparently that code is not valid according to W3C. (Though it worked so this is a total bummer).
I found an alternative piece of code that I like but I must have !important in order for the slider to be displayed.
document.getElementById('JQuerySlider1Container').style.display='block !important';
But it doesn't work with !important.
Does anybody have a simple solution for this problem?
Its not good practice to add CSS using JS. You should keep HTML, JS and CSS all completely separated.
The way to show/hide things using JS is by default hide the objects you want to hide using CSS, e.g:
#JQuerySlider1Container {display:none;}
The in your JS, add a class to the body, using something like:
$(function() {
$('body').addClass('has-js');
});
Then you can write specific CSS rules knowing that you have JS enabled, e.g:
.has-js #JQuerySlider1Container {display:block;}
First than all sorry that I can put code here, the best way is to see the live site.
WHen I go to www.theprinterdepo.com, the menu is acting weird on the onmouseover.
However when I go to a product page it works fine.
I am trying to know whats going on in the html but I cant find the problem.
pasting the entire generated html wont do any good.
This is a magento ecommerce site. so either its a problem with html, js or css?
Once detected I could paste the original code that generates that part of the problem
I got it! There is class named "over" in line 28 on any of your css(may be in assets new.css) remove that class & everything will be fine. Below is the given class.
.over {
left: 40px;
position: absolute;
top: 10px;
z-index: -1;
}
I am attaching image regarding this class. https://dl.dropbox.com/u/19982181/svs.jpg
I am trying to add a single most recent tumblr post to another page.
I found the easiest way is to use the Javascript code provided by tumblr
here is what they offered:
<script type="text/javascript" src="http://occupy837.tumblr.com/js"></script>
adding ?num specifies the number of posts, so I can see that I am almost there
<script type="text/javascript" src="http://occupy837.tumblr.com/js?num=1"></script>
when I go to the page
(www.Occupy837.com) One single post shows up!
my only issue now is that it has a single 1 on the left of the post
tumblr quotes "[use the] code to embed your posts as basic HTML that you can skin with CSS:"
Does anyone have any idea how I can remove that number?! what do I have to do with CSS to make that disappear!
Add this to your css
li.tumbler-post {
list-style: none;
}
Here is the answer!
after doing some research I found this to be the solution:
ol.tumblr_posts{
list-style:none;
}
be careful not to type "tumbler" because it is always without the "e"
My friend ran into this last night and tumblr exactly provides something that is pretty decent but with very few documentation. Every tumblr post has CSS classes. The above answers work. If you need to know more about the classes tumblr provides right click a post and click inspect element.
You can add these classes to the CSS of your website. Adjusting the CSS of tumblr doesn't effect it.
Adding the above CSS will fix this issue.