i have this facebook feed script on my site, but on mobile the height isnt responsive, how to make it responsive if i dont have access to that script? I have only this in my html
<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js"
data-fw-param="47031/"></script>
Please use Facebooks own plugin's
https://developers.facebook.com/products/social-plugins/embeds/
Those are responsive and always up to date.
Simply look at the HTML, target it and change the CSS for it. Same as any other HTML.
The JS is taking pre-determined styles set by that site feed.mikle.com. So, to change the style you would have to get into that style sheet. Since you're not creating the feed yourself (and using something someone else created) you're likely at the mercy of their setup. Perhaps you can contact their support team to find out your options.
Related
I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';
In GitHub, I cannot stand how the side menu is located on the right side when you are in a repository. It drives me nuts, so I want to script something that will change the float:right property on the side menu to float:left.
A buddy of mine suggested I write a chrome extension for this. Before I look into that, I wanted to get feedback on what options I have to accomplish this.
You could either use Greasemonkey (named Tampermonkey in Chrome) to add user scripts, or if the CSS element has an unique path to identify it, you can use Stylish to overwrite CSS properties.
I recommend the latter. It is easy and will certainly work.
I am trying to embed a custom google map into a worpress site. Custom as in I cannot just copy and paste the html code that google would provide for one of their basic google maps, it is dynamic and written in javascript. The way I am trying to do it now is by typing the javascript code into a text widget in the sidebar and using google.maps.Map(document.getElementById("map_canvas"), mapOptions); in the javascript to generate the map in a <div> on the page with id "map_canvas". Upon loading the page and inspecting it, the <div> loads, and the javascript runs without any error but no map shows up on the page. Intuitively it seems like the map is just too big to fit in the <div>, and when I check the style tag of the map_canvas <div> it does have overflow: hidden as part of the css. So changed it to visible which still didn't solve the problem. So now I am stuck... Does anyone have any experience with using javascript with wordpress and could help me out? I've tried to be as detailed as possible but if you need to know any more please let me know. Much appreciated!
The proper way for you to add the JavaScript to the header would be by using wp_register_script() and wp_enqueue_script(). You can add this into the functions.php file.
I'm not entirely sure whether JS executes in a text widget, so you would be better adding this into the page template that you need this to appear on.
It's impossible to tell whether you have styles overriding the div that contains the map, so it may be a good idea to post a link perhaps?
I want to make a theme swither using jQuery, I see the example made in the docs of the jQuery mobile page, but it's exhaustive as it dublicates the same page but with different theme swatch as a result it affects only one page in the App, I want a theme switcher that affects all the pages of the App, thanks.
Perhaps storing the selected theme (local storage/cookie) and using jQuery to grab that value and add a style element to the page?
Consider using jQuery UI and their themeswitcher - http://jqueryui.com/docs/Theming/ThemeSwitcher
It works great on our internal site. If nothing else, look at the way they do it and you should be able to come up with your own customer solution rather easily.
Use a session variable to determine which CSS to include.
Is reddit's join popup that appears on the page hidden on the page or is it injected via ajax?
How do they do it? (general terms if someone out there knows, I will dig into the source myself but need some guru pointers).
For reddit, its a hidden element. You can use tools like Shadowbox or nyroModal to achieve this kind of effect (since you can adjust the animation)
Its not so much AJAX as it is javascript, and it is generally refered to as a Lightbox or a Dialog
It's there but hidden with CSS, and shown with Javascript. With jquery, you could achieve the similar effect by triggering:
$('#join_div').show();
Try to view the page with CSS disabled and you'll see it's at the bottom of the page. (Optionally, you could try viewing the source.)