I've been searching all night to find the answer to this. I'm working on a site and trying to modify the behavior of the hover effect. I'm not sure which .js file(s) are creating the effect and how I should go about modifying them.
Basically, I have a grid layout on the homepage and when you hover over an image, it displays the title and a dark overlay. There's a bit of an animation on the title as well.
I need to add a media query to block this on mobile, and to make the title of the blocks appear on page load. You can see what I mean by visiting the site.
The site is here: theshoemaven(dot)com
I understand that you can use
var mq = window.matchMedia('#media all and (max-width: 700px)');
to create media queries within javascript. But I'm not sure where to apply it, and how to ensure that the title over each box appears on pageload.
I would GREATLY appreciate any help on this. Thanks!
** UPDATE **
I've found the following function which calls the portfolio grid. If I can make it display the title on load (not just hover) I will be in great shape. Unfortunately, PHP is not my favorite language. :)
/*---------------------------------------*/
/* Output Starts
/*---------------------------------------*/
// Start container
echo '<div class="'.$container.' cap-wrap">';
// If hover
if($hover==true) {
echo '<div class="hover-wrap">';
// If lightbox
if($link=='lightbox') {
echo '<a rel="gallery-'.$postid.'" href="'.$full[0].'" title="'.$image_cap.'" class="swipebox">';
echo vk_hover('lightbox');
echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';
echo '</a>';
// If post
} else {
echo '<a href="'.$post_link.'" title="'.$post_title.'">';
echo vk_hover('link');
echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';
echo '</a>';
}
echo '</div>';
// If no hover
} else {
echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';
}
// The Caption
if($caption==true && $image_cap!='') {
echo '<div class="caption no-link no-dec"><p>'.$image_cap.'</p></div>';
}
// End container
echo '</div>';
} // end foreach
} // end if attachments
} // end function
The matchMedia API has its uses: it's great for using addListener to let you know when your media queries switch. In my opinion it probably shouldn't be used here though.
I notice that the body of the page has the following classes: "noTablet", "noMobile", so when I emulated an iphone, sure enough "noMobile" became "mobile."
I was going to suggest implementing a 100% css fix using the body.noMobile selector, but it appears that you are using a ton of javascript to make the effect happen in the first place, which is setting inline styles, so...
Looking at your javascript I am finding the following compressed code:
s(".hover > div").css("opacity", "0"), s(".hover").hover(function() {
s(this).children("div").addClass("fadeUpIcon").animate({opacity: "1"}, 100)
}, function() {
s(this).children("div").css("opacity", "0").removeClass("fadeUpIcon")
if you were to switch all of the selectors to prepend body.noMobile like: $('body.noMobile .hover > div') You will likely eliminate the "overlay" for all mobile devices.
Then you could use simple (albeit your selectors will likely have to be more specific) CSS like:
body.mobile .hover {
}
To style it for mobile.
This will probably work out for you, but I am of the strong opinion that you should try to budget time to remove the javascript controlling this and simply use the :hover pseudo selector along with transforms and transitions to achieve the same effect. If you really want to use media queries instead of whichever mobile detection you currently use, then those could easily go into the CSS as well.
Related
I am using the following JavaScript to detect the screen-width and use it as a constant across my template files through conditional statements to display / not-display portions of my site. While it has nothing much to do with my questions, but just in case... Yes I am using WordPress. Also I am already using mobiledetect PHP Library.
function getLayoutWidth() {
if (isset($_GET['width'])) {
define( "SCREEN_WIDTH", $_GET['width']);
} else {
echo "<script language='javascript'>\n";
echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
. "&width=\" + screen.width;\n";
echo "</script>\n";
exit();
}
}
Important :
Other techniques are like...... Let's assume if my site is 2MB in size, it will still load 2MB of content and then hide 1.5MB of it on mobile devices by using CSS properties like display:none; Whereas I don't want that template part to load itself, thus not needing to hide anything.
I am not looking to load an entire JavaScript library like jQuery or so to do this because location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; is the only JavaScript in my entire site. Rest everything is pure PHP, HTML and CSS based. I even disabled jQuery of WordPress in the front-end template.
UPDATE :
Since some friends did not get my point although I mentioned clearly that I don't want to load the content into DOM at all, I am giving a bit more clarity here.....
For Example --- #1200px I want only 1 Sidebar to be displayed. #1600px I want 2 Sidebars to be displayed and over 1600px I want 3 Sidebars to be displayed. Please don't suggest Media Queries solutions as I already know it and that is exactly what I don't want to do. I want to avoid loading the content into DOM. Kindly let focus be only and only on questions asked. Also please don't post suggestions as answers. Let others with proper answers do it. Kindly post suggestions in Comment section.
My questions :
Is this a good / correct way to do from SEO stand point? If not why?
My URL is displayed as example.com/my-product-category/my-product-name/?width=1440 How to remove /?width=1343 and display just example.com/my-product-category/my-product-name part?
Simple answer, no, it is not good from a SEO standpoint. Or any other standpoint. Crawlers such as Googles are designed to completely ignore all hidden elements and thus you will lose big time SEO ranking if your content isnt getting fully crawled, and crawlers crawl each site multiple times masquerading as mobile devices to check if the site is mobile friendly as well.
http://www.seonick.net/responsive-design-seo/
Not to mention the trouble of calculating your arbitrary cutoff point of .5mb serves no purpose if the content is merely hidden (since its all getting sent anyway thus saving no bandwidth).
You need to do this in pure CSS using media queries, it is the most compatible way and allows for a fluid design (changes on the go as the window resizes.
<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 700px)" href="full.css">
That will use one css file if the window is smaller than 700px and the other if it is over.
Another of my more favorite methods is to use the http://mobiledetect.net/ class. Its small and fast, more accurate and better flexibility. Load that class then just add classes to your body element depending on the visitors browser
<body class="<?PHP if ($detect->isMobile() && !$detect->isTablet()) echo " .phone";?>">
Then style by targeting classes inside body.phone. This method also ensures you know if the browser is mobile BEFORE the DOM starts to process, meaning you can serve compressed versions of images through some simple logic rather than having CSS swap them out or just resize them or omit entire parts of the markup from being sent to the user at all ensure bandwidth is only used for parts of the DOM relevant to the users device.
<body>
This is normal content and will be visible to all devices
<?PHP if (!$detect->isMobile()) { ?>
This content will only be visible to desktop users, in fact it wont even be transmitted to mobile users thus making it NOT in the DOM
<?PHP } ?>
</body>
To set a cookie in javascript
function Cookies(){};
Cookies.prototype.save=function(name,value,days){
if( days ) {
var date = new Date();
date.setTime( date.getTime()+( days*24*60*60*1000 ) );
var expires = "; expires="+date.toGMTString();
var dom = "; domain="+document.domain;
} else { expires = ""; }
var path = "; path=/";
var tmp=[];
if( typeof( value )=='object' ) {
for( p in value ) tmp.push( p+'='+value[ p ] );
value=tmp.join(';');
}
document.cookie = name+"="+value+expires+path;
};
Cookies.prototype.read=function(name){
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for( var i=0; i < ca.length;i++ ) {
var c = ca[i];
while( c.charAt(0)==' ') c = c.substring(1,c.length);
if( c.indexOf( nameEQ ) == 0 ) return c.substring( nameEQ.length, c.length );
}
return null;
};
Cookies.prototype.erase=function(name){
this.save( name, "", -1 );
};
var cn='jsdim';
var ckie=new Cookies;
ckie.save( cn, JSON.stringify({ width:screen.availWidth, height:screen.availHeight, colour:screen.colorDepth, depth:screen.pixelDepth }), 1 );
In PHP
<?php
if( isset( $_COOKIE['jsdim'] ) ){
$json=json_decode( $_COOKIE['jsdim'] );
if( !defined('SCREEN_WIDTH') ) define( 'SCREEN_WIDTH', $json->width );
if( !defined('SCREEN_HEIGHT') ) define( 'SCREEN_HEIGHT', $json->height );
if( !defined('SCREEN_COLOUR_DEPTH') ) define( 'SCREEN_COLOUR_DEPTH', $json->colour );
if( !defined('SCREEN_PIXEL_DEPTH') ) define( 'SCREEN_PIXEL_DEPTH', $json->depth );
}
?>
I do not think, that screen size/resolution is really what you want to adjust your view templates for mobile devices. Actually you want to know what plattform/device someone is using, think about Nexus 7, which has 1920 × 1200 or Sony Xperia Z5 with 2160 x 3840px.
I would look at user-agent and HTTP headers for the server side code, there are already good libraries for that: e.g. mobiledetect. For the client side the best practice is to use CSS3 Media Queries: Media Queries for Standard Devices
You can retire the $_GET of the URL by the htaccess, I'm using RewriteRule.
Options +FollowSymLinks
RewriteRule ^folder/file.php$ folder/file.php?g=2
#if you want to remove php file extension, don't keep the .php before the $
To remove all php files extension: php.net.
Edit: this is for who doesn't use Wordpress
You can use this plugin:
https://wordpress.org/plugins/mobble/
It adds an is_mobile()-feature.
In your theme you can now use is_mobile() instead of $_GET['width'] > ...
This way you don't need a ?width= in your $_GET
This is a post about Wordpress page/text styling:
Some of my posts are in Hebrew, some are in English.
If I use font Arial the English letters looks a bit bigger than the Hebrew letters, by 1pt actually so I was wondering if there is a way to apply a font-size that is lower by 1pt only to English letters of the font.
I could think of this solution:
Use get_post_custom() to get a custom field I created for the English-language posts and if field language='English' I would echo '...addClass('english')to the page where classenglish` has a font-size that is smaller by 1pt.
This solution is quite horrible in my opinion, I believe there is a much simpler way to get this done.
Any ideas?
EDIT: This is my current solution, better solutions are of course welcome :)
<?php
$language_field = get_post_meta(get_the_ID(), 'language', true);
if(strcmp($language_field,'english') == 0) {
echo '<script>'.PHP_EOL;
echo ' $(document).ready(function() {'.PHP_EOL;
echo ' $("#main h1").css("font-size",parseInt($("#main h1").css("font-size"))-6);'.PHP_EOL;
echo ' $("#main p").css("line-height","1.5");'.PHP_EOL;
echo ' });'.PHP_EOL;
echo '</script>'.PHP_EOL;
}
?>
How about adding a category called english, which you choose for every post that's in English? Then you could check the page if it has the category, and if it does, change the font size.
Code example:
<?php
if ( in_category( 'english' )) {
echo('<style> .classname {font-size: *1px less than Hebrew*;} </style>');
}
?>
This should function as you want and you don't need to add custom posts, and add classes through Javascript or jQuery.
You can apply the category English through bulk-edit on the Wordpress dashboard, so you don't have to go into each page seperately.
More information about in_category can be found here.
I'm not really that familiar with php so hence the question. I have a list of products that is dynamically created via php. When a user clicks one of the generated lists it sorts the products. I also want to move the user to a new part of the page to see the results. I thought I could do this via an smooth scroll using an onchange, but I'm not that sure where to put it. Site is bootstrap so was going to use the scrolling-nav.js.
here is the php generating the list
<?php
echo '<div id="brands">';
// echo $product['name'].'<br>';
echo '<a href="#top-of-products"><input style="display:none"
type="checkbox" data-type="brand" onchange="showlist(this)"
id="b-'.$brand['id'].'" name="'.$brand['name'].'"
value="'.$brand['name'].'"><label id="b-'.$brand['id'].'"
for="'.$brand['name'].'">'.$brand['name'].'</label></a><br>';
}
echo '</div>';
Help much appreciated
You put short stretch of your code, but, I see a } lost before the last line.
I guess you put your code for scrolling a new part of the page in showlist() javascript function.
But, I don't know if onchange method is the better. I would use onclick method
Is the results panel always in the same location on the page? If so, and you're using the jquery library, consider using jquery's scrollTop function:
$('#item).click(function(){
$(html).scrollTop(val); //where val is the number of pixels hidden above the scrollable area when the Results panel is positioned where you want it to be
});
If the vertical position of the Results panel is variable, you can use this to define the "val" variable above:
$('#id-of-rewards-panel').offset().top
You might want to add a few pixels to that, because that will bring your element to the very top of the page
here is the whole code:
<?php foreach($view->brandfromcategory_data as $brand) {
echo '<div id="brands">';
// echo $product['name'].'<br>';
echo '<input style="display:none" type="checkbox" data-type="brand" onchange="showlist(this)" "scrollTo(#buttonreplacement)" id="b-'.$brand['id'].'" name="'.$brand['name'].'" value="'.$brand['name'].'"><label id="b-'.$brand['id'].'" for="'.$brand['name'].'">'.$brand['name'].'</label><br>';
}
echo '</div>';
?>
I have this code :
htmlDiv+="<DIV class='addon-checkbox'
onclick='event.stopPropagation();__toogleEnabled(\""+__addons[i]+"\", this);'
if (localStorage[\"__Enable__\"+__addons[i]]==\"yes\")
this.style.backgroundPosition= \"0 -50px\"; >";
and when click on this div function __toogleEnabled correctly change background-position of image, but rest code do nothing.
I guess that this(receive current element) or whole instruction
if(localStorage[\"__Enable__\"+__addons[i]]==\"yes\")
this.style.backgroundPosition= \"0 -50px\"; >";
dont work because there is no event. But i dont know what event must be.
May be it can be fix with another solution. I just want that background-position have value "0 -50px" , if localStorage[\"__Enable__\"+__addons[i]] have value "yes" when page loaded , but it must be done only for current div because there are many other div with same class and without id.
I think you're getting your quotes mixed up. Your code needs to be changed to:
htmlDiv+='<div class="addon-checkbox" '+
'onclick="event.stopPropagation();__toogleEnabled(\''+__addons[i]+'\', this);'+
'if(localStorage[\'__Enable__\'+__addons[i]]==\'yes\')'+
'this.style.backgroundPosition=\'0 -50px\';" >';
But a much better way to do all this would be to use the DOM.
I got a response from a server, the text format of the response is
"<div class=\"esv\"><h2>John 3:16 <object type=\"application/x-shockwave-flash\" data=\"http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016\" width=\"40\" height=\"12\" class=\"audio\"><param name=\"movie\" value=\"http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016\" /><param name=\"wmode\" value=\"transparent\" /></object></h2>\n<div class=\"esv-text\"><h3 id=\"p43003016.01-1\">For God So Loved the World</h3>\n<p id=\"p43003016.07-1\"><span class=\"verse-num woc\" id=\"v43003016-1\">16 </span><span class=\"woc\">“For God so loved the world,<span class=\"footnote\"> [1]</span> that he gave his only Son, that whoever believes in him should not perish but have eternal life.</span> (ESV)</p>\n</div>\n<div class=\"footnotes\">\n<h3>Footnotes</h3>\n<p><span class=\"footnote\">[1]</span> <span class=\"footnote-ref\">3:16</
span> Or <em>For this is how God loved the world</em>\n</p>\n</div>\n</div>"
The html format likes
Any skill can pop up this message in javascript or jquery?
If you want a nice looking popup in the middle of your screen (not the standard javascript alert popups), then...
For the div you have above, you can
1) position it in the center of your screen (read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) You may want to style the div with position: fixed;, depending on how your website is set up. Also set z-index: 999; or some other high number.
2) hide it. For example in the CSS set .esv {display: none}
3) using jQuery/javascript, display it when whatever event you want occurs
$("#somebutton").click(function(){
$(".esv").show(); // will display the popup window
}
This is a very simplified model. But something along these lines might be what you want.
If you want to have different content each time, then you can at first have your <div class="esv"></div> empty. Then use jQuery to insert whatever you desire into before show(). However you will have to research how to dynamically select whatever you are inserting.
So step 3 might look like this:
$("#somebutton").click(function(){
$(".esv").html( /* whatever html you want to insert. */);
$(".esv").show(); // will display the popup window
}