I'm working on a module for Christmas on Magento.
Each day a pop-up appears on the index page of the website.
This pop-up will contain an image and a link.
To load the pop-up, I define what css to use (module.phtml):
<?php
$today = explode(".",date("d.m.y"));
$month = $today[1];
$day = $today[0];
$file = 'POP UP '.$day.'.jpg';
$class = 'block block-AdventCalendar'.$day;
?>
<div class="<?php echo $class ?>">
</div>
Example in the CSS file (app-base.css):
.block-AdventCalendar1 {
background-image: url('../images/popupAdvent/POP UP 1.jpg');
background-size: 100% 100%;
color: #fff;
margin: 0;
height:350px;
width :700px;
}
This code works fine, but when the day changes Magento loads the wrong CSS class.
To display the correct image I must clear the Magento cache each day.
However, when I modify something in the phtml file, the changes are displayed immediately, only the inline CSS is not reloaded.
Does anybody have an idea to force the phtml to load the right css?
Try to use this:
Mage::app()->cleanCache();
To clear the Magento cache after your code loads.
You could also try a JavaScript alternative:
<script>
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var element = document.getElementById('your_div_id');
if (element) {
element.className += element.className ? ' block-AdventCalendar'+day : 'block-AdventCalendar'+day;
}
</script>
Add this after the div you want to add the class to. Also, give your div a unique ID ( <div id="your_div_id">...</div> )
The problem is not due to the CSS.
If I alter it or the phtml, all change are immediate.
Only the div class stay unchanged
<div class="<?php echo $class ?>">
Related
I'm generating an invoice PDF using laravel snappy wkhtmltopdf
and I'm tring to add some text in the bottom of the last page,
now i already have a footer-html with the number of the page.
I tried to show the content only in the last page with this way:
<!DOCTYPE html>
<div id="footer_text">
{!! nl2br($footer_text) !!}
</div>
<div class="pagination"><span id='page'></span> of <span id='topage'></span></div>
<script>
function remove(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
if( vars.page != vars.topage && vars.topage > 1){
document.getElementById('footer_text').innerHTML = '';
remove('footer_text');
}
if(vars.topage == 1){
document.getElementById('pages').innerHTML = '';
}
</script>
and it does show me the text only in the last page BUT in the previous pages I have a big white space, here is a screenshot:
page number 1:
page number 2:
I feel like i tried everything, please help me
There is no issue with your script it might be some style issue. As you are removing footer_text in all previous pages and showing only on last page and this is somehow creating too much space. Check your CSS there must be margin-bottom or padding-bottom which is creating too much space. Enjoy!
Late to the party but looks like the ID footer_text will be set multiple times and ID's should be unique so I guess it would have worked if you used a class instead and getElementsByClassName
The footer height can't be dynamic on a different page when using Wkhtmltopdf. It's always with a static height. If this is your footer.html you have to add to your style:
body {height: 70px /for example/; position: relative;}
so you can align bottom (with position:absolute; bottom:0;) you #footer_text and content. But still, have some white space on all prev pages.
In the PDF generators, the footer content area is independent of the body content.
This is a strange one and it might not even be possible, but what I'm trying to do is check whether a particular stylesheet is loaded, if it is run one code, else run another. For example:
// Create loop counter
$counter = 0;
while ( have_posts() ) {
// MaxIT - Shows 2 listings per loop instead of 2
for ($x = 0; $x < 2; $x++) {
// Increase loop counter
$counter++;
the_post();
// Include listing loop template
get_template_part( 'loop', 'listing' );
} // endwhile have_posts()
echo '<hr style="width:100%; padding-left: 40px; margin: 60px 0px;" />';
}
The point of this code is to display properties on a real estate website. The original code did not have the FOR loop, I added that in so it would display 2 properties at a time before displaying in a horizontal rule. This was purely for aesthetics and looks great when viewing the properties in "grid" view, which shows two properties per row, like:
PROPERTY | PROPERTY
HORIZONTAL RULE
However, the client requested having a list view also, which shows 1 property per row, with image on the left and details on the right. I accomplished this with a second stylesheet which is loaded on click of a drop-down selector. However, because the above PHP loads 2 properties before the HR, it shows like:
PROPERTY
PROPERTY
HORIZONTAL RULE
So what I want to accomplish is having the PHP say "if the grid_view.css is loaded, show 2 properties before the HR, else if the list_view.css is loaded, show 1 property before the HR".
Is this possible with PHP? I'm not familiar with any other programming languages, so if it can be done in Javascript / JQuery that would be fine but I might need the "dummy" explanation if possible.
Thanks heaps in advance!
---- UPDATE / EDIT
Ok, I'm having trouble working out how to do what Justin suggested with "setting a flag" (don't quite understand that terminology tbh) in the PHP, so here's more insight on my current code (and yes it's built on Wordpress, sorry I should have said so earlier).
In my header.php I have...
Argh, having trouble..
So in my header.php I have this...
<link rel="stylesheet" type="text/css" href="/wp-content/themes/wpcasa/slick/slick.css"/>
<link href="/wp-content/themes/wpcasa/lib/assets/css/layout.min.css" rel="stylesheet" type="text/css" title="layoutgrid">
<link href="/wp-content/themes/wpcasa/lib/assets/css/layout_list.css" rel="stylesheet" type="text/css" title="layoutlist">
<script type="text/javascript" src="/wp-content/themes/wpcasa/lib/assets/js/styleswitcher.js"></script>
Only one of those stylesheets is active at a time, whiche one is handled by the styleswitcher.js file...
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(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;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
That is not my code and as mentioned earlier I barely know anything about Javascript.
Then in my search-listings.php file I have this markup to create the selector...
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">View <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Grid view</li>
<li>List view</li>
</ul>
</div>
The main issue is that I need the loop counter from the PHP code at the top to run one way or another. The link provided by #aug seemed to make sense, but as far as I know I can't wrap that Javascript around the PHP to achieve what I need to do.
So to recap...
There's a PHP while loop which displays the property listings.
There's a PHP for loop which I wrote inside the while loop to display 2 listings each time the while loop cycles, instead of 1.
The above worked fine until the introduction of the "list" view came about, which due to my lacking PHP knowledge had to be implemented by using a Javascript file to switch the active stylesheet.
I now need a way to still be able to switch to the list view stylesheet, but to either change the $x < 2 to $x < 1 when the list view stylesheet is loaded, OR to be able to have an if / elseif statement that give you either $x < 2 or $x < 1 depending on which stylesheet is loaded.
I hope that makes sense, thanks for all the help so far!
PHP will get processed before any HTML, Javascript or CSS does, so it has no way of telling if the CSS class exists, because it does not exist at that point in time.
In your particular situation I would dump the properties into a JSON object and handle it with Javascript.
EDIT: PHP Specific Solution
Well, I'm making an assumption from your code you are using wordpress, which it may be worth while looking into get_posts() http://codex.wordpress.org/Function_Reference/get_posts
With the limited info and code available, the easiest way is for you that I can see is to set a flag that designates whether or not this is a list view.
lets assume that variable is $listview which is set to true or false.
in your page's template file you can do...
if(!$listview) {
//echo your extra css here...
}
then with your loop you created...
$counter = 0;
if(!$listview) { $hr_counter = 1; } else { $hr_counter = 2; }
while ( have_posts() ) {
// MaxIT - Shows 2 listings per loop instead of 2
for ($x = 0; $x < $hr_counter; $x++) {
// Increase loop counter
$counter++;
the_post();
// Include listing loop template
get_template_part( 'loop', 'listing' );
} // endwhile have_posts()
echo '<hr style="width:100%; padding-left: 40px; margin: 60px 0px;" />';
}
this way you will either do 2 posts then the rule, or 1 post then the rule.
Without seeing more of the code there isn't much else I can assist with in your specific situation.
Hope that helps or gets you headed in the right direction.
Okay so I have this portfolio page where I display a couple of thumbnails, and you can order it by tags, so for example like this:
year 1
And this works fine. However, my thumbnails display at three on a row, so only the first two should have a right margin, the third one no margin.
I used PHP to do this which works fine.
if ($result=$link->query($query)) {
for ($i=1; $i <= $result->num_rows; $i++) {
$row= $result->fetch_assoc();
$id = $row['number'];
$title = $row['title'];
$bgthumbnail = $row['thumbnail'];
if($i%3 == 0){
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview noMargin\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
} else {
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
}
}
$result->close();
}
However, when I click a tag, the margin doesn't update. So when a thumbnail was given no margin in the overview because it was the third one in row, when it displays first because of a chosen tag, it also receives no margin.
Of course this is because nothing "refreshes" or something, but I was wondering if there is an "easy" way to fix this problem? To make the PHP loop run again or something?
You must to set/remove noMargin class name via javascript:
$('.year-clicker').click(function (event) {
event.preventDefault();
var year = $(event.currentTarget).data('year');
$('.thumb').hide().removeClass('noMargin').filter('.year' + year).show();
$('.thumb:visible').each(function (i, e) {
if ((i + 1) % 3 == 0) {
$(e).addClass('noMargin');
}
});
return false;
});
Try out this jsfiddle http://jsfiddle.net/xgE3K/1/
unless your "tags" are recalling the page - so that the php is re-executed - you probably want to look at javascript (or possibly ajax) to do the reformatting of the layout.
Depending on the quantity of thumbnails and the variety of tags, you might use the php to create a div (with a relevant id and a style="" attribute) for each of the different filter tags - containing the layout of the thumbnails for that tag (so you can ensure your layout is fine for each view).
i.e. repeat your code above enclosed by a unique div tag for each view.
Make the default view div visible (style="display: block") and the others hidden (style="dsplay: none").
Then have a javascript function that is executed on any tag click. This will make the relevant div visible and the rest hidden, by changing their style value as above.
Uses a bit more memory, but your switching between views will be quicker than doing a reload.
Despite all this, I think it's cleaner and more scalable to recall the page with the relative filter (depending on the tag) then you will have more control over the layout.
I have a web site. Here in my home page there is a content "My dummy text ". which is placed in ul li a tag. ie
<ul><li><a>My dummy text</a></li></ul>
i want to make this text should highlighted in blue when someone first lands on the home page. other wise it's must be in white. Does any one know how to do this ?
mine is a php web site
Thanks in advance
Just to add a little onto the cookie method I suggest adding a class to the <body> tag so that if in the future you want to do more you could do it without having to modify the PHP.
For example:
<?php
function dejavu() {
$class = '';
if($_COOKIE['beenHereBefore']) {
$class .= 'beenHereBefore';
}
else {
$class .= 'firstTimeHere';
setcookie("beenHereBefore", true);
}
return $class;
}
?>
<body class="<?php echo dejavu(); ?>">
One thing that you want to take into account though is that if a user clears their cookies then it will act as though they are visiting the site for the first time; so I suggest, if possible store it in their user profile if one exists.
So then in your CSS you can do the following:
ul li a {color: white;}
.firstTimeHere ul li a {color: blue;}
I dont see any code so..here is my theoritical explaination as well...
1 Use Cookies.
2 HTML5 Cache..You can use localstorage to do that as well
you can use cookie
set default 0
if someone loaded the page than change cookie to 1 otherwise 0
.
<ul>
<li>
<a <?php if($_COOKIE["status"] == 0){style="color:blue;"} ?>>My dummy text</a>
</li>
</ul>
Use:
$(window).ready(function(){
// do your CSS stuff here ...
});
Or use :
$(document).ready(function(){
// do your CSS stuff here ...
});
Check this link : http://api.jquery.com/ready/
I advise you to do it using jquery to check if you are in the home page
Assume your home page is called : index.php
Like this :
if(window.location.href.indexOf("index.php") > -1)
{
$('#ulid li').css('color', 'red');
}
else $('#ulid li').css('color', 'black');
Give your ul an ID and assume you want to highlight using red and your original text color was black
No need to use Cookies you can do this trick using jquery very easily .
An ex developer of ours when working on one of our first versions of our internal PHP framework integrated the dropdown element of main navigation using javascript and I need to get a fix applied for IE8 which is causing the dropdown to appear offset even though using CSS displays fine in Firefox / Chrome.
The site in question is http://www.benchmemorials.co.uk/
In the event there is sub menu items from the main navigation that use a dropdown, javascript is called to display this I believe (below)...
<script type="text/javascript">
$(document).ready(function() {
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
$('#link_why-buy-from-us').mouseover(function() {
$('.dropdown').show();
});
$('.dropdown').mouseover(function() {
$('.dropdown').show();
});
$('.dropdownstyle').mouseover(function() {
$('.dropdown').show();
});
$('#link_why-buy-from-us').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdown').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdownstyle').mouseleave(function() {
$('.dropdown').hide();
});
});
</script>
I'm not too hot on javascript but from what I gather, I presume the above is instructing the drop down to appear below the 'Why Buy from Us' top navigation menu item. As I mention, this is working as expected in Firefox/Chrome.
However, the issue appears to be the fact that somewhere along the line, inline CSS is being generated dynamically for the dropdown class - this is dynamically generating
style="top: 61px; left: 964px; display: none;"
Every file on the server has been searched and nowhere is this specified, my only guess is that the javascript above is somehow creating this line of CSS which is therefore preventing me from altering the position of the dropdown in the IE only stylesheet to fix the display in IE8.
The rest of the code for the dropdown menu from the php file is below:-
<div class="dropdown"><div class="dropdownstyle">
<?php
mysql_select_db($database_config, $config);
$query_sub_pages = "SELECT * FROM `pages` WHERE site_id = '".$current_site_id."' AND menu_location = 'sub' ORDER BY `order` ASC";
$sub_pages = mysql_query($query_sub_pages, $config) or die(mysql_error());
$row_sub_pages = mysql_fetch_assoc($sub_pages);
$totalRows_sub_pages = mysql_num_rows($sub_pages);
$current_sub_link = 0;
do {
$current_sub_link = $current_sub_link + 1;
?>
<p<?php if ($current_sub_link != $totalRows_sub_pages) {echo ' style="margin-bottom: 10px;"';}; ?>><a class="sub_link" href="<?php echo $site_base.$row_sub_pages['page_location']; ?>"><?php echo $row_sub_pages['page_display_name']; ?></a></p><?php //if ($current_sub_link != $totalRows_sub_pages) {echo '<br />';}; ?>
<?php } while ($row_sub_pages = mysql_fetch_assoc($sub_pages)); ?>
</div>
</div>
As you can see, there is no inline CSS applied to .dropdown. All CSS from the sylesheets can be viewed if you inspect element in browser.
Please could anyone advise how or if it is possible to prevent this dynamic CSS positioning from being generated or an alternative / easier method of ensuring the dropdown appears consistently across all browsers including IE?
Thanks in advance.
The positioning is done by this code:
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
It takes the position of #link_why-buy-from-us relative to the document, and adds it to the .dropdown element.
I don't know if you're familiar with jQuery, but the code above is written using that JavaScript library. For more documentation about .offset(), look here: http://api.jquery.com/offset/