Wordpress text widget with onclick function - javascript

I have a text widget, in it i just place there an iframe.
A few days ago i wanted to override this widget on mobile browsers and add a background of an image on mobile browsers, luckily i used How to hide widget on mobile , i changed the code from that link instead of hiding the widget on mobile i simply give it a background image.
Now my questions is how can i add an onclick function to this widget, for example when this widget is clicked on a mobile browser i call a shortcode.
Any code examples of how to add some javascript to a text widget so that when it is clicked i call a shortcode.

My solution is not related to javascript. But maybe this can help.
Check out the conditional tag wp_is_mobile
https://codex.wordpress.org/Function_Reference/wp_is_mobile
if ( wp_is_mobile() ) {
echo do_shortcode('[YOUR-CUSTOM-MOBILE-SHORTCODE]');
} else {
echo do_shortcode('[YOUR-CUSTOM-DESKTOP-SHORTCODE]');
}
You should be able to display whatever you want on mobile and then something different on desktop.

Finally all i had to do is specify the mobile custom css code, i give it a name then make it only visible to mobile (800width and above are not mobile, probably tablet, pc e.t.c)
#media only screen
and (max-width : 800px) {
.media{ display: none; }
}
#media only screen
and (min-width : 800px) {
.vid{
display: none;
}
}
Then from my widget i add the image background pointing to a custom function i put in the header.php
<img class="vid" onclick="myFunction();" src="http://www.domain.com/wp-content/uploads/2016/03/button.png" />

Related

Is it possible to style a html select drop-down like this and still keep it mobile friendly?

First, this is what the drop-down should look like:
This should be just a normal html select
<select>
<option>January</option>
<option>February</option>
<option>March</option>
...
</select>
There's probably some JQuery component library out there that I can use, but what I also want is that when you're on mobile, e.g. Android, iOS, etc... that the mobile browser will handle the display/ineraction of the select box, rather than having the user interact with the drop-down as it is displayed in the screenshot... In other words, this styling should only apply for desktop.
So you want one element to be displayed on desktop, and a different one displayed on mobile, why not have them both in the markup and display a different one via CSS depending on the size of the screen?
#media screen and (max-width: 760px){
#select-box{
display:inherit;
}
#dropdown-box{
display:none;
}
}
#media screen and (min-width: 761px){
#select-box{
display:none;
}
#dropdown-box{
display:inherit;
}
}
Something like that? note that display:inherit should be whatever display the element is having by default.

Setting HTML5 autofocus attribute with CSS

I have a website that has one input field (like a search engine) and I use the HTML5 autofocus attribute on it.
But on very small screen sizes the soft keyboard that pops up on many devices obscures too much of the screen.
Is it possible to se the autofocus attribute in a CSS media query, so its only active on larger displays ?
I know I could set the focus with Javascript, but right now the pages doesn't use any Javascript and I would prefer to avoid it if its possible to use CSS for this.
As suggested above in comments: Use two inputs and make the one hidden (display:none;). Then with a #media rule target screens that have a maximum width of 480px and make the hidden input visible (display:block;) and hide the other one.
CSS:
.smscreen {
display: none;
}
#media screen and (max-width: 480px) {
.lgscreen {
display: none;
}
.smscreen {
display: block;
}
}
See Example using CSS.
Otherwise, you can detect the window size with jQuery on page load, and if the screen is larger than 480px to use .focus() function on the input.
See Example using jQuery.

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Only display Hide/Show button if on Mobile/Tablet

I have the following Demo: http://jsfiddle.net/NCj2u/
Currently it works on all platforms, but I'd prefer if the show button & hidden content only worked in Tablet & Mobile. Desktop would show the content automatically and hide the button.
Can someone explain how I do this? Would I use media queries or do this in my Javascript?
My jQuery:
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
Thank you.
Hmmm there are few options you could try . I personally recommend against browser detection unless you want to specifically target only a browser that allows your implementation. For your requirement why not try media queries?
.nav-toggle{
display : none; // display none for everyone
}
/* Landscape phone to portrait tablet show the button */
#media (max-width: 767px) {
.nav-toggle{
display : block; // or inline-block or inline : which ever is appropriate for you.
}
}
With these scripts you can detect any mobile browser
http://detectmobilebrowsers.com/
I think the shortest solution is to ask for mobil browsers and if the user isn't using one execute the click() function of your button

Responsive CSS /java script DIV - show on click only on mobile query

I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.

Categories