We Keep Coding

How to turn elementor section into clickable button

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;
}

Is there any way to change the CSS of the Facebook Like Box?

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.

Simple onmouseover not working on eBay auction page?

I have created a background which changes onmouseover of "test image". This works on a normal hosted account at http://zabb.co.uk/full_page_ebay_table_working.html but not when placed within an eBay auction http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=160653524585#ht_802wt_1398 (scroll down required).
Is there a way to fix this so that it works in eBay please? Thanks very much! Regards,
Paul

I'm not sure to what extent eBay allows javascript, but I would have thought that you could achieve something with a CSS hover pseudo.
You could do the following, which would cause a background-image change on hover.
<style type="text/css">
table#bigPic { background: url(http://images.worldgallery.co.uk/i/prints/rw/lg/6/0/Derek-Hare-Sunset-Over-the-Sea-60196.jpg);
table#bigPic:hover { background: url(http://josefsipek.net/docs/s390-linux/hercules-s390/ssh-dasd1.png); }
</style>

For security reasons, it is utterly impossible to use Javascript in an eBay page.

Require help with css, Autosuggest jquery by Drew Wilson

Because of stackoverflows spam prevention, links + image are in pastebin. HERE
On with question-
I want it so when I click an autosuggest it works as a link but that isn't the main question here.
If you go on my website (pastebin) you can see there are boxes around the text box.
[Please look at the image, also in pastebin] (Drew's form ontop, mine below)
It must be css, but I can not find which property has to be changed.
(the form is generated on-the-fly so I can't look at the html.
thanks

Pal, thats because you have called the plugin twice at $(document).ready.
Remove the following from your $(document).ready.
$(function () {
$("input[type=text]").autoSuggest(data);
});
JSFiddle here: http://jsfiddle.net/naveen/H7ptB/

Try commenting out all the border properties and box shadow properties in the Auto Suggest CSS file.

Problems with jQuery UI Datepicker

Ok, I've rolled my own theme, I've made a custom jQuery UI pack (progress bar, date picker, slider) and installed it all. Seems to (mostly) work except for two things:
When my page first loads the datepicker div is visible; and
The text "Next" and "Prev" are visible in large font underneath my icons. None of the examples seem to have this problem.
Now (1) I'm currently solving by:
#ui-datepicker-div { display: none; }
in another CSS file but again none of the demos seem to need this.
What am I missing?

I fixed it using #ui-datepicker-div { display: none; }

Ok many thanks, It's Work bro, here what I've did to resolve :
write this style to file jquery-ui-1.7.1.custom.css (or anye css file that you loaded) :
#ui-datepicker-div { display: none; }
then refresh your page

make sure your javascript files are properly loaded, check for missing files or incorrect path.
make sure that your script run after the document is ready, try putting your script before and/or inside the $(document).ready(){}
try stripping out your own css to see if there's any css conflict.
post some code for us here. :)

I had a similar problem because I was using the wrong version of the stylesheet for the version of jQuery UI I was using (I'd upgraded the jQuery UI without upgrading the stylesheet). If you're using jQuery UI 1.8.17, make sure that the stylesheet being used is also version 1.8.17.

Knowing nothing else about your problem, I believe it may be other css on your page conflicting with the picker.

For me the css was not included (jquery.ui.datepicker.css). So I saw a div (ui-datepicker-div) at the bottom of the page and I got the following error with FireBug: instActive is undefined.

Please change from
instActive.inline
to
(typeof(instActive) == 'undefined' || instActive.inline)
in your jqueryui.js
For discussion on this goto->http://code.google.com/p/jquery-datepicker/issues/detail?id=285

Since no one answered the second part of the question...
Add the following two lines to your .ui-icon CSS:
text-indent: -99999px;
overflow: hidden;
That should fix "Prev" and "Next" showing up.