How to apply css to php 'echo $tube->error;'? - php

The CSS that I'm attempted to attach to 'echo $tube->error;' is not showing.. It just shows as default black text as if it had no css... How would I fix this?
Thanks (:
Below is what I need to fix..
The html/php part:
<div id="error">
<pre>
<?php } else {
echo $tube->error;
}
}
?>
</pre>
</div>
The html/php part in context:
<?php
if(isset($_POST['url']))
{
include('curl.php');
include('youtube.php');
$tube = new youtube();
$links = $tube->get($_POST['url']);
if($links) { ?>
<div id="result">
<b>Download Links ( Same IP Downloading only )</b> :
<?php
$format = '<p>Download video.%s - %s<br/>Right-click download link and choose etc...</p>';
while($link = array_shift($links))
{
echo vsprintf($format,$link);
}
?>
</div>
<div id="error">
<pre>
<?php } else {
echo $tube->error;
}
}
?>
</pre>
</div>
The CSS:
#error {
width:404px;
margin-left: auto;
margin-right: auto;
font-size:12;
font-family: 'Dosis', sans-serif;
color:white;
padding-top:20px;
}
The part of youtube.php(additional info.. not sure if you guys need this):
function get($url)
{
$this->conn = new Curl('youtube');
$html = $this->conn->get($url);
if(strstr($html,'verify-age-thumb'))
{
$this->error = "Adult Video Detected";
return false;
}
if(strstr($html,'das_captcha'))
{
$this->error = "Captcah Found please run on diffrent server";
return false;
}
if(!preg_match('/stream_map=(.[^&]*?)&/i',$html,$match))
{
$this->error = "Error Locating Downlod URL's";
return false;
}
Thanks again for any help!!

EDIT: I was wrong, it wasn't a CSS error, but a construct error, as others have noticed. I just rewrote the "The html/php part in context" to make it more clear and hopefully working:
<?php
if(isset($_POST['url']))
{
include('curl.php');
include('youtube.php');
$tube = new youtube();
$links = $tube->get($_POST['url']);
if($links)
{
?>
<div id="result">
<b>Download Links ( Same IP Downloading only )</b> :
<?php
$format = '<p>Download video.%s - %s<br/>Right-click download link and choose etc...</p>';
while($link = array_shift($links))
{
echo vsprintf($format,$link);
}
?>
</div>
<?php
}
else
{
?>
<div id="error">
<pre>
<?php echo $tube->error; ?>
</pre>
</div>
<?php
}
}
?>
Hope everything is ok now :)

Try this code:
<?php
if (isset($_POST['url'])) {
include('curl.php');
include('youtube.php');
$tube = new youtube();
$links = $tube->get($_POST['url']);
if ($links) {
?>
<div id="result">
<b>Download Links ( Same IP Downloading only )</b> :
<?php
$format = '<p>Download video.%s - %s<br/>Right-click download link and choose etc...</p>';
while($link = array_shift($links)) {
echo vsprintf($format,$link);
}
?>
</div>
<?php } else { ?>
<div id="error">
<pre>
<?php echo $tube->error; ?>
</pre>
</div>
<?php } } ?>
Don't forget to include the CSS... and please, please write more readable in the future.

Your <div id="error"> is never rendered if there is an error, because your else statement only includes the error text itself. Move the div and pre inside the else to get it working.
<?php } else { ?>
<div id="error">
<pre>
<?php echo $tube->error; ?>
</pre>
</div>
<?php } ?>

Try this css:
#error pre {
width:404px;
margin-left: auto;
margin-right: auto;
font-size:12;
font-family: 'Dosis', sans-serif;
color:white;
padding-top:20px;
}

Try to define your CSS also for #error pre and not only #error:
div#error {
width:404px;
margin-left: auto;
margin-right: auto;
padding-top:20px;
}
div#error pre
{
font-size:12;
font-family: 'Dosis', sans-serif;
color:white;
}
Use also an inspector (like Chrome's one, that you call with CTRL+I) to make sure:
- there are not overrides that undo there lines
- CSS is properly loaded (if in an external file)

Related

Better way to switch between multiple galleries/sliders?

Is there a better way to switch between 4 different image sliders in the same place, that are built in WordPress MetaSlider plugin and echo'ed with shortcodes using PHP?
At the moment i'm using jQuery to switch between the sliders, but somehow it only shows the first slider when switching between them, the others are invisible until i resize the window.. then the other gallery/slider appears on view.
<div id="slider2">
<div class="slider-links">
<p class="slider-link hotel active">
<?php the_field("link1"); ?>
</p>
<p class="slider-link living">
<?php the_field("link2"); ?>
</p>
<p class="slider-link retail">
<?php the_field("link3"); ?>
</p>
<p class="slider-link office">
<?php the_field("link4"); ?>
</p>
</div>
<div class="img hotel">
<?php echo do_shortcode('[metaslider id="72"]'); ?>
</div>
<div class="img living">
<?php echo do_shortcode('[metaslider id="96"]'); ?>
</div>
<div class="img retail">
<?php echo do_shortcode('[metaslider id="98"]'); ?>
</div>
<div class="img office">
<?php echo do_shortcode('[metaslider id="103"]'); ?>
</div>
</div>
/* CHANGE SLIDERS ON CLICK */
var slider2img = $('#slider2 .img');
var sliderLink = $('#slider2 .slider-link');
sliderLink.click(function() {
sliderLink.removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('hotel')) {
slider2img.hide();
$('#slider2 .img.hotel').show();
} else if ($(this).hasClass('living')) {
slider2img.hide();
$('#slider2 .img.living').show();
} else if ($(this).hasClass('retail')) {
slider2img.hide();
$('#slider2 .img.retail').show();
} else if ($(this).hasClass('office')) {
slider2img.hide();
$('#slider2 .img.office').show();
}
});
I changed the jQuery to switch opacity instead of display: block/none. And position: absolute each slider inside their relative parent div so they would be on top of each other. When I examined the first solution, the images had 0px width & height until resizing the window.. so i thought forcing width/height on the images wasn't a good option imo and bad for responsiveness too.
/* CHANGE SLIDERS ON CLICK */
var slider2img = $('#slider2 .img');
var sliderLink = $('#slider2 .slider-link');
sliderLink.click(function() {
sliderLink.removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('hotel')) {
slider2img.css('opacity', '0');
$('#slider2 .img.hotel').css('opacity', '1');
} else if ($(this).hasClass('living')) {
slider2img.css('opacity', '0');
$('#slider2 .img.living').css('opacity', '1');
} else if ($(this).hasClass('retail')) {
slider2img.css('opacity', '0');
$('#slider2 .img.retail').css('opacity', '1');
} else if ($(this).hasClass('office')) {
slider2img.css('opacity', '0');
$('#slider2 .img.office').css('opacity', '1');
}
});

Avoid last page #page to page-break;

I have a php code like this :
<?php foreach ($pks as $k => $v): ?>
<div class="content">
//print something
</diV>
<?php endforeach ?>
I need like this. Each looping, I open a new page.
So, In css :
#media print {
.content {page-break-after: always;}
.content:last-of-type{
page-break-after: avoid;
}
}
But in last page, it creates a new page which is blank.
Please advise.
I had the same issue, and for me this code worked:
<style>
.pageBreak {
page-break-after: always;
}
</style>
#php
$size = count($envelopes_paychecks);
$pages = 1;
#endphp
#foreach ($envelopes_paychecks as $employee)
<div>
...
</div>
#php
if ( $pages < $size) {
echo '<span class="pageBreak"></span>';
}
$pages++;
#endphp
#endforeach

How to make visible all my videos with pagination in my Ziggeo application?

So I need some help from a Ziggeo user. I have registered 8 videos in my ziggeo server and now I want to display them in pages divided by 2 videos per page.
Here is what I wrote, but unfortunately it doesn't show me any video, but the compiler doesn't say any error.
<?php include('./ziggeo/pagination.class.php');?>
<?php $myvideos = $ziggeo->videos();
$myarray = array($myvideos);?>
<div class="gallery">
<?php if(count($myarray)){
$pagination = new pagination($myarray, (isset($_GET['page'])?$_GET['page']:1), 3);
$videos = $pagination->getResults();
if(count($videos)!=0) {
echo $pageNumbers = '<h2>'.$pagination->getLinks().'</h2>';
foreach ($videos as $video) {?>
<div class="wall-of-videos-container">
<ziggeo ziggeo-video="<?= $video->token ?>"
ziggeo-width=320 ziggeo-height=240 ziggeo-popup> </ziggeo>
<?= date("Y-m-d h:i a", $video->created) ?>
·<?= $video->duration ?> seconds</div>
<? } echo $pageNumbers; } } ?>
</div><!-- End Gallery -->
I included all the files needed for the Ziggeo configuration.
Who can help me? Thank a lot!
Without seeing 'pagination.class.php' file contents and the output that you are creating it is difficult to know what went wrong, however to create pagination in PHP using Ziggeo PHP SDK, you would do something like this:
<?php
require_once('Ziggeo.php');
$ziggeo = new Ziggeo('YOUR TOKEN', 'YOUR PRIVATE KEY', 'YOUR ENCRYPTION KEY');
?>
You can get the token and keys from your dashboard on ziggeo.com
Ziggeo.php can be retrieved from Ziggeo PHP SDK here: github.com/Ziggeo/ZiggeoPhpSdk
Now looking at your code it seems that this is the call that you are not making correctly. To get the videos you should make the following call:
<?php $myvideos = $ziggeo->videos()->index(); ?>
It is good to remember that by default you will only get up to 50 videos, so if you are expecting to have more than that, you should set the limit parameter.
You can set limit, skip, reverse, states and tags
In case you want to get up to 100 videos (which is maximum per call) you would do something like this:
<?php
$myArguments = array('limit' => 100);
$myvideos = $ziggeo->videos()->index($myArguments);
?>
Now to list them, you would do something like this:
<?php
foreach ($myvideos as $video) {
?>
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php
}
?>
You could add a check with count($myvideos) before foreach, however it should not be needed.
In general, to create a page with 2 videos per page you could use something like this:
<?php
$i = 0; //to have two videos per page
$j = 0; //to see how many we have
foreach ($myvideos as $video) {
$j++;
if($i === 0) { ?>
<div class="gallery_page">
<?php } ?>
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php
$i++;
if($i === 2) { ?>
</div>
<div class="page_number"><?php echo $j/2; ?> </div>
<?php
$i = 0;
}
}
if($i !== 0) {
?>
<div class="page_number"><?php echo (($j-1)/2)+1; ?> </div>
<?php
}
?>
It is good to point out that the above code is not a complete paging system - it is just a simple sample that shows you how you could do it, however it would need to be customized and worked upon further to match gallery style, and similar.
Looking at your code, I think that it should work using something like this:
<?php
include('./ziggeo/pagination.class.php');
$myvideos = $ziggeo->videos()->index();
?>
<div class="gallery">
<?php
if(count($myvideos)) {
$pagination = new pagination($myarray, (isset($_GET['page']) ? $_GET['page']:1), 3);
$videos = $pagination->getResults();
if(count($videos)!=0) {
echo $pageNumbers = '<h2>'.$pagination->getLinks().'</h2>';
foreach ($videos as $video) { ?>
<div class="wall-of-videos-container">
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php echo date("Y-m-d h:i a", $video->created); ?>
·<?php echo $video->duration; ?> seconds</div>
<?php } echo $pageNumbers;
}
} ?>
</div><!-- End Gallery -->
I did presume however that you have the headers set in the HTML HEAD of the page where the gallery will be shown:
<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-latest/ziggeo.css" />
<script src="//assets-cdn.ziggeo.com/v1-latest/ziggeo.js"></script>
<script type="text/javascript">ZiggeoApi.token="YOUR TOKEN"</script>
If not present, the HTML code will be created from the above PHP code, however your videos would not be shown due to Ziggeo framework not being loaded on client side.
UPDATE (2016/05/31)
As the above is just general way to do this, it is not including CSS nor JavaScript.
As such I am adding the full code that can be used and as it shows another way to collect the page numbers and leaving the above so that someone can see both.
<script type="text/javascript">
//Basic code needed to switch pages
var currentPage = 1;
function showPage(number) {
//If we are on the same page as the selected one, we just break away from the function, so that we do not hide the same.
if(currentPage === number) { return false; }
var toShow = document.getElementById('page_' + number);
var toHide = document.getElementById('page_' + currentPage);
toShow.style.display = 'block';
toHide.style.display = 'none';
currentPage = number;
}
</script>
<style type="text/css">
/* Code to hide the pages (all) and show first one only, as well as a bit of styling so that it has some basic frame */
.gallery_page > ziggeo {
float: left;
}
.gallery_page {
background-image: linear-gradient(-45deg, lightGray, white);
border-radius: 10px;
box-shadow: 0 0 2px gray;
box-sizing: border-box;
display: none;
min-height: 400px;
margin: 20px 0;
padding: 40px;
width: 720px;
}
.gallery_page:first-child {
display: block;
}
.page_number {
box-shadow: 0 0 3px gray;
float: left;
margin: 0 4px;
text-align: center;
width: 2em;
}
</style>
<div class="gallery">
<?php
//How many videos per page do we want to have?
$numberOfVideos = 2;
//How many videos was there in total?
$totalNumberOfVideos = 0; //only if we need it for something later on
//How many videos are approved / are shown
$totalNumberOfApprovedVideos = 0; //only if we need it for something later on
//which page are we working on?
$currentPage = 1;
//Will serve as buffer for page number elements
$pageNumbers = '';
//temporary videos counter
$i = 0;
foreach ($myvideos as $video) {
//to only show approved videos
if($video->approved === true) {
if($i === 0) { ?>
<div class="gallery_page" id="page_<?php echo $currentPage; ?>">
<?php } ?>
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php
$i++;
if($i === $numberOfVideos) { ?>
<br style="float:none; clear:left;">
</div>
<?php
$pageNumbers .= '<div onclick="showPage(' . $currentPage . ');" class="page_number">' . $currentPage . '</div>';
$currentPage++;
$i = 0;
}
$totalNumberOfApprovedVideos++;
$totalNumberOfVideos++;
}
else {
//$video->moderation_reason
//If you want to check if there was a reason why the video was not approved, you can check the above, or alternatively, you could do something else at this point.
$totalNumberOfVideos++;
}
}
if($i !== 0) {
$pageNumbers .= '<div onclick="showPage(' . $currentPage . ')" class="page_number">' . $currentPage . '</div>';
}
?>
</div><!-- End Gallery -->
<?php echo $pageNumbers; ?>
<?php
//This is not needed for pagination to work, however you might want to show it, etc
echo '<br><br>';
echo 'Approved videos: ' . $totalNumberOfApprovedVideos . '<br>';
echo 'Total videos: ' . $totalNumberOfVideos . '<br>';
echo 'Total number of pages: ' . $currentPage . '<br>';
echo $numberOfVideos . ' videos per page<br>';
?>
It is good to point out that this is just a framework - so the code mentioned before will work just as the followup code does, however both require additional styling and code to make it look nice and behave as we want it.
After adding the java script below:
<script type="text/javascript">
var currentPage = 1;
function showPage(number){
var toShow = document.getElementById('page_' + number);
var toHide = document.getElementById('page_' + currentPage);
toShow.style.display = 'block';
toHide.style.display = 'none';
currentPage = number;}
</script>
And the right references to the div gallery, now all is working. Thanks Bane.

echo Div visibility using CSS and PHP?

I am trying to echo a CSS style in php. basically I want to make a Div visible.
the Div's visibility is set to hidden in the css stylesheet and i need to make it visible in an else statement in php.
I am using this code:
<?php
} else {
echo '<style type="text/css">
#apDiv1 {
visibility:visible;
}
</style>';
}
?>
but that doesn't work! it doesn't make the Div visible. I tried it this way as a test and this way worked and it echo-ed hello world:
<?php
} else {
echo 'hello world';
}
?>
so is there any other way to do this? am I doing anything wrong?
You can also try like
<?php
} else {
?>
<style type="text/css">
#apDiv1 {
visibility:visible;
}
</style>
<?php
}
?>
Or directly give the div style like
<?php
} else {
?>
<div id="appDiv1" style="visibility:visible"></div>
<?php }
?>
Even you can put !important if any other styles are applied on that div.
try visibility: visible !important;, or display: block.
You can use javascript instead of css
<script>
document.getElementById('apDiv1').style.visibility = 'visible';
</script>
Do directly on the div:
<div id="apDiv1" <?php if(/* Your condition */){ /* Do something */ }else{ echo 'style="visibility:visible;"';} ?>></div>

Vary css element width dynamically

I have the following shortcodes in a page or post:
[custom_width width='500' color='red']
[custom_width width='600' color='blue']
The shortcode function is to display 2 buttons with their respective width. The problem is that the buttons are displayed the same width using the last width of 600.
The function:
<?php
function xyz ($attr) {
$xyzwidth = $attr['width'];
$xyzcolor = $attr['color'];
my_style($xyzcolor);
?>
<style type="text/css">
.mystyle {
width: <?php echo $xyzwidth; ?>px;
}
</style>
<div class="mystyle">
My Text
</div>
<?php } ?>
note: the rest of the css is in its own .css file
function my_style($xyzcolor) {
switch ($xyzcolor) {
case 'red': my_red();
break;
case 'blue': my_blue();
break;
}
<?php function my_red() { ?>
<style type="text/css">
.mystyle {
............
}
.mystyle: hover {
............
}
.mystyle a {
............
}
.mystyle a:hover {
............
}
</style>
<?php } ?>
If you're using the same class (mystyle) on both buttons, the last width defined on that class will apply to both elements.
For your purposes, you're probably better off with:
<?php
function xyz ($attr) {
$xyzwidth = $attr['width'];
?>
<div style="width: <?php echo $xyzwidth; ?>px">
My Text
</div>
<?php
}
?>
Define your blue and red CSS in general. Not in your loop every time. Something like this:
<style type="text/css">
// red
.mystyle.red {
............
}
.mystyle.red:hover {
............
}
.mystyle.red a {
............
}
.mystyle.red a:hover {
............
}
// blue
.mystyle.blue {
............
}
.mystyle.blue:hover {
............
}
.mystyle.blue a {
............
}
.mystyle.blue a:hover {
............
}
</style>
And in your xyz function, give your div the desired class, and set the width of div internal:
<?php
function xyz ($attr) {
$xyzwidth = $attr['width'];
$xyzcolor = $attr['color'];
my_style($xyzcolor);
?>
<div class="mystyle <?php echo $xyzcolor; ?>" style="width: <?php echo $xyzwidth; ?>px;">
My Text
</div>
<?php } ?>

Categories