How to Combine the Condition of PHP and CSS with JavaScript - javascript

I made a page for the mobile version. I made a condition based on the title and the size of the screen. Here is the condition :
If the Title > 17 characters and screen size < 392px
then do:
.postContent img {
bottom: 65px;
}
else and screen size > 391px
.postContent img {
bottom: 50px;
}
Here is image preview : http://i.imgur.com/59IG7UG.png
(sorry, i need at least 10 reputation to post image)
The first article should position the picture as the image to the second article.
How to combine PHP and JavaScript to change CSS :
<?php if (strlen(trim($post->getTitle())) > 17): ?>
<script type="text/javascript">
//do something
</script>
<?php else: ?>
<script type="text/javascript">
//do something
</script>
<?php endif; ?>
I have read this : PHP conditions depending on window width (media queries?)
but don't know how to implemented it.

Maybe try to add class to your .postContent? By printing it into div with PHP.
<div class="postContent <?php
if (strlen(trim($post->getTitle())) > 17) print 'bot65';
else print 'bot50'; ?>
">
// content
</div>

Related

Using php to run a JavaScript that edits the css after a from is submitted?

After the user submits a form the .php file is supposed to display only certain parts of the forum depending on if cc_owner has a value of personal or something else. I have the contents to be displayed in two separate div elements one called CreditContent_ID and the other called BillContent_ID the inline css sets both div display elements to 'none'. I am trying to use php to check whether the value of cc_owner is personal or something else. If it's personal I want it to change the CreditContent_ID display to block.
I think the problem is with this line:
echo 'document.getElementById("CreditContent_ID").style.display="block"';
Here is my code:
<style>
.CreditContent{
display:none;
}
.BillContent{
display:none;
}
</style>
<body>
<?php
if($_POST['cc_owner']=='personal'){
echo '<script language="javascript">';
echo 'document.getElementById("CreditContent_ID").style.display="block"';
echo '</script>';
}else{
echo '<script language="javascript">';
echo 'document.getElementById("BillContent_ID").style.display="block"';
echo '</script>';
}
?>
<div class=CreditContent id="CreditContent_ID">
//I have other code here.
</div>
<div class=BillContent id="BillContent_ID">
//more code here
</div>
</body>
<style>
.hideContent {
display: none;
}
</style>
<body>
<div class="CreditContent <?php echo $_POST['cc_owner'] != 'personal'? 'hideContent': ''; ?>"
id="CreditContent_ID">
//I have other code here.
</div>
<div class="BillContent <?php echo $_POST['cc_owner'] == 'personal'? 'hideContent': ''; ?>"
id="BillContent_ID">
//more code here
</div>
</body>
Add css class hideContent to div based on cc_owner value.

Auto scroll a webpage with rss-feed, item by item

I'm making a wallboard (monitor with a newsfeed on it). I'm new to javascript but managed to find a few sources that helped me to put an RSS-feed on a PHP-page and format it with CSS.
So far so good!
To turn this page into a wallboard, I'd like to show one feed-item for a few seconds and then have to page automatically scroll to the next item. Each feed-item is in a <div class="post">.
Could someone please help me with some sample autoscroll code?
I've tried to scroll continuously through the page, but that is not the effect that I'm looking for.
This is the code of a <div> that shows a post:
<div class="post">
<div class="post-head">
<h2><a class="feed_title" href="<?php echo $link; ?>"><?php echo $title; ?></a></h2>
<span><?php echo $pubDate; ?></span>
</div>
<div class="post-content">
<?php echo implode(' ', array_slice(explode(' ', $description), 0, 20)) . "..."; ?> Read more
</div>
</div>
To scroll, I currently use a script from javascriptkit.com:
<script language="JavaScript1.2">
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",100)
}
window.onload=initialize
</script>
The page that I have now is available here:
https://app-storage.org/mrm/rsstest.php
The effect I'm looking for is:
1. Show the first news item
2. wait a few seconds
3. smoothly scroll to the second news item
4. at the end of the page, return to the first item
Any help is greatly appreciated!!!

How do I move a php call to another div and have it still work

I've looked around a bit, and found issues similar to mine, but not quite the same. I have a page template that is laid out in 4 columns in HTML. Inside column 4, I have a php function echoing a gallery of images.
<div id="homepage-layout">
<div id="homepage-column-1">
<div class="homepage-small"><?php echo get_homepage_img_small_1(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_2(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_3(); ?></div>
</div><!-- End Column 1 -->
<div id="homepage-column-2">
<div class="homepage-large-left"><?php putRevSlider("homepage"); ?></div>
</div><!-- End Column 2 -->
<div id="homepage-column-3">
<div class="homepage-med"><?php echo get_homepage_img_med_1(); ?></div>
<div class="homepage-med"><?php echo get_homepage_img_med_2(); ?></div>
</div>
<div id="homepage-column-4">
<div class="homepage-large-right"><?php putRevSlider("home_small"); ?></div>
</div><!-- End Column 4 -->
</div>
I'm using jQuery to change the layout of the site based on the width of the window.
var column3 = $("#homepage-column-3").contents();
var column4 = $("#homepage-column-4").contents();
var swapped = false;
$(window).on('resize', function() {
if( $(window).width() <= 700 && !swapped){
$("#homepage-column-3").html(column4);
$("#homepage-column-4").html(column3);
swapped = true;
} else if( $(window).width() > 700) {
$("#homepage-column-3").html(column3);
$("#homepage-column-4").html(column4);
swapped = false;
}
});
However, when the window size triggers the jQuery, the RevSlider from Column 4 freezes on the image it was displaying at the time, and the only way to get it running again is to refresh the page.
Any thoughts? Or, if this question has been answered already, please point me in the right direction.
Thanks!
jeroen had the right idea. I was able to take the 4 columns, and split them into 2 chunks. I was then able to make them both flex containers, and with a of media query, was able to make the columns swap places while keeping the RevSlider initialized.
Thanks to all for your help!

Run PHP After Page Loads up

I created a facebook app recently that posts some content to the user group. If the user posts to multiple groups then I would like to display a progress bar. The HTML part of it I created a form that has got a text area and the form redirects to a post.php file. And I post to the user groups in that post.php page. As I said I use a progress bar to show the progress. But the message gets posted first and only then the progress bar works. I'm pretty sure about the progress bar that it works.
To put it short the PHP part gets executed first before the JS or the HTML. So please do help me out in overcoming this problem.
This is what I have in the post.php file :
<body style = "background-color: #4ea6e6;">
<center>
<div style = "width: 50%; margin-top: 5%; padding: 50px; background-color: #fff;">
<div class="input-group" style = "height: 30px;">
<progress min = "0" max = "100" value = "50" style = "height: 30px;">
</progress>
<span class="input-group-addon">
0%
</span>
</div>
<br>
<div class = "message">
</div>
<br>
<div class = "alert alert-success success" style = "font-size: 18px; font-family: Muli; visibility: hidden;"><b>Great !</b> Your message was successfully posted !</div>
</div>
</center>
</body> <?php
require_once 'libs/facebook.php';
$config = array(
'appId' => 'My app id',
'secret' => 'my app secret',
'fileUpload' => false, // optional
'allowSignedRequest' => false, // optional, but should be set to false for non-canvas apps
);
$facebook = new Facebook($config);
$groups = $_POST['groups'];
$link = $_POST['link'];
$message = $_POST['message'];
$count = count($groups);
for($i=1; $i<count($groups); $i++){
$api = $facebook->api($groups[$i] . '/feed', 'post', array(
link => $link,
message => $message
));
$api = $facebook->api($groups[$i]);
$name = $api['name'];
$j = ($i/(count($groups)-1))*100;
?>
<script type = "text/javascript">
var timeout = setTimeout(post, 0);
function post(){
$('progress').attr("value" , "<?php echo $j; ?>");
$('.message').html("Posting to <?php echo $name; ?>");
$('.input-group-addon').html("<?php echo $j; ?> %");
if(<?php echo ($i/count($groups)); ?> != 1){
var timeout = setTimeout(post, 0);
}
else{
clearTimeout(timeout);
}
}
</script>
<?php
}
You can't execute sync PHP after html and js are loaded.
BUT you can execute an XHR call to a PHP script so that once js is loaded the AJAX call starts and PHP script is executed in background
Here is how to use AJAX with jQuery
You can execute a separate PHP file after the page has loaded, without JS, like this.
Notice that the "background image" is actually a PHP file. The PHP file will execute when it is called at the bottom of the body, after the html file and all elements above it.
You can send data to the PHP file via GET in the CSS property...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#runPHP
{
background-image:url(script.php);
display:none;
}
</style>
</head>
<body>
<div id="runPHP"></div>
</body>
</html>

html vertical auto scroll with javascript

Im new with pure javascript (well i found its easy to use jquery, but its too bad i cant use jquery in this case :D).
I tried to follow this sample code, but its not working in my web.
This is a screen shoot and explanation of my web :
So, this page is separated into 2 different html file, one for header and its jquery tabs, the other one for the content below the tab.
My plan is to let the content below the jquery tabs scrollable, so the following code is from the html of my content (below the jquery tabs):
<body>
<script type="javascript">
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
</script>
<div id="form_search">
<div id="top">top</div>
<?php echo form_open('backend/index') ?>
<p>
Kelas :
<?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
<?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
</p>
<p>
Nama : <?php echo form_input('txt_nama');?>
Alamat : <?php echo form_input('txt_alamat');?>
Tanggal Lahir : <input type="text" id="datepicker" />
</p>
<?php echo form_submit('btn_search', 'Search');?>
<?php echo form_close(); ?>
</div>
<div>
<?php echo $table ?>
<?php echo $pagination ?>
<div id="bottom">bottom</div>
</div>
Please note that the top and bottom div is just for the page limit (i followed the sample code above).
I have tried another way like change the id/element used for limit, but its still not working.
Thank you for your help :D
Note : i use codeigniter framework for this project :D
It seems the solution to the user's question was to simply add overflow-y:scroll into the css for the div tag where the content was being placed. simple solution
jQuery
$("html, body").animate({ scrollTop: $('#bottom').offset().top }, 2000);
^ ^ ^
What to scroll ---------------------- to which element --------- duration
There seemed to be a lot of extra stuff in the bottom of your html screen in fiddle. I took that out and adjusted some of the javascript.
But taking the extra out did the trick already ...
// extra stuff starting at line 332
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-555555-6']);
// more stuff
http://jsfiddle.net/djwave28/pA9QZ/3/

Categories

Resources