i have popup-window in my script. I use window.open, but almost all browsers block this kind of windows. So i wanna change it to another popup, which include php-script. I saw it at another sites. As i understand, they use ajax. Could you provide for me some more info?
Try out the solution provided by thickbox, I think this is what you're looking for.
First, you create a div (or other element) with the aspect you want, adding it the following extra CSS:
#popup {
display: none;
position: absolute;
top: 100px; // changeable
left: 100px; // changeable
}
Then you use JavaScript to change the CSS making the div visible, and add the XHTML response from AJAX to its innerHTML.
I'd recommend using jQuery or other easy-to-use framework if you're used to JavaScript / AJAX.
Related
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;
}
I have two div in my webpage, it is the two possible option the user can choose from. I set each div background with css (background-image). The images are preloaded, when the site loads. There is two possible state, when an option selected xxx_image_enabled.png are set as a background image, when the option is not selected, xxx_image_disabled.png is set as a background image. In some browser (Chrome) it is flashing a little bit. I set the background-image property with jQuery.
The css looks like this:
.option-div{
width: 70px;
height: 70px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
}
Any idea what causes the flashing? After a refresh it disappears.
Try to refrain from setting original styles in your scripts to keep your code unobtrusive and separated. You can set the background-image in CSS then change the value of it later in jQuery.
Not sure how your HTML is set up but make sure your CSS is loaded before your script in the HTML order. If your script is loaded first, you will have some rendering issues. Put your <link> or <style> before the <script> that uses it.
I'm just guessing these suggestions since I can't see the jQuery code.
It's very likely that the jQuery is causing the event to repeat. To fix this, I suggest using a jQuery .stop within the function.
Consider:
$("#option-div").stop(true,false).animate({ //this is assuming you are using animate, swap this out for the event you are using
//just to make you aware, if you set this to false,false it will skip the event and go straight to the finished outcome, in this case the animation would not trigger.
Also, consider using an if statement to prevent the event from being called, if it is already active.
Consider:
if($("#option-div").not(':animated')){
else { // your code here
It would be easier to understand the problem and help you if you provide your jQuery code, I would have commented but don't have 50 rep yet.
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'm trying to implement something like this: http://code.google.com/p/iab-billboard-adunit/ , on my site...
The demo for it is here: http://johnpaulkelly.me/iab/js_nobranded/index.html
My main issue is that I'd like to make the ad an image and not a flash file. It's easy enough to insert a .jpg into where the ad would go (in the Javascript itself), but once I do that I lose the "Close Ad" button which is part of the Action Script functionality.
Could someone help me out, or suggest the best possible way to go about appending the "Close Ad" functionality to an HTML element versus having it be part of the action script? (And not interupt the generation of the cookie)
Is this easily possible? I'm new to Javascript in general, but I could likely figure it out once I'm pointed in the right direction--I just can't seem to wrap my head around the easiest way to go about doing this...
If it makes it easier, I don't need to retain the "Show Ad" button once the cookie has been set if it makes it any simpler...
(Again, perhaps this is not the best way to do something like this--so if someone has an alternative way of going about similar functionality...I'm completely open to trying it out)
If you simply want to add a hide AD link, add your image and a link in the function loadBanner() by changing the second line using your own image url. You will also need some css to style that close text.
Just noticed that this code will be inside the iframe. It will need to call out to the parent for the close function like this.
Javascript:
window.frames["banner"].document.write('CLOSE AD <b>X</b>');
CSS: This needs to be in the iframes code
#closeAd {
position: absolute;
right: 0;
color: white;
text-decoration: none;
padding: 2px;
line-height: 1em;
}
I'm developing an application that contains a menu with links to the several pages and I would like to know what's the best way to implement it.
One solution is to create the menu on all pages via JavaScript, but it would duplicate menus when it should have just one global to all pages.
Another solution would be to create a div outside the framework but this way would not be taking any advantage of the features of the framework.
At the present version of jQueryMobile 1.0a4.1 the only solution I found was creating a div outside the jQueryMobile page structure.
HTML:
<div id="global-header">Header</div>
<div data-role="page">
...
</div>
CSS:
#global-header {
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
z-index:99999;
}
.ui-page {
padding-top: 40px;
}
I prepared this post specifically for this question, It deals less with fixed headers and footers (since I generally believe them to be misguided wastes of already limited real estate) and more about dealing with global navigation in general. Hope this helps.
Check the plugin I'm writing, called multiview.
It's still work in progess, but you can set a global header/footer by placing it inside the wrapper page, but outside any panels you are using.
Let me know if this would fit your need. I'm slowly progressing towards bug-fixing stage.