can we use div tag inside anchor function?
I have this div
#first{ opacity:0; }
Then I want to put it into my anchor. Here it is:
<?php
if(is_array($databuku)){
echo '<ol><br>';
$i = 1;
foreach($databuku as $key){
$judul = '<div id="draggable'.$i++.'" class="ui-widget-content"><center><strong>'.$key->tbl_name.'</strong>
<br> <br>
' .$key->index_no. ' / ' .$key->id. '
<br>
'.anchor('perpustakaan/koreksi_buku/'.$key->id, 'Edit').' |
// I want to put the div #first in 'Delete' function below //
'.anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, 'Delete').'
</center></div>';
echo $judul;
}
echo '</ol>';
}
?>
I want to put the div #first in anchor -> delete. How can I do that?
This will work
anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, '<div id="first">Delete</div>')
As the div opacity is 0 in your CSS, so that the div content is not visible to you and if you want to add the div#first in your anchor tag then try,
...anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, '<div id="first"></div>Delete')....
Related
I am developing a website and I need few div tags to hide when I'm on the mobile version and certain conditions are met.
I usually hide div tags with jQuery or CSS but I can't do this here. The div tags are created with a PHP foreach printing a query. And some of the results must not show on the mobile version of the website. But I still need those results to show on the desktop version.
if ($article->reference > 0) {
if ($article->apothema > 1) {
if ($catalogue->id == 2) {
$qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Άμεσα Διαθέσιμο') . "</span>";
} else {
$qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Available') . "</span>";
}
echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
} elseif ($article->getApothema() == 1) {
$qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Αμεσα Διαθέσιμο') . "</span>";
echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
} elseif ($article->getApothema() < 1) {
$qty = "<img title='Μη Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/midiathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Not Available') . "</span>";
echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
}
}
This is the condition based upon the div tags are to hide or show on mobile.
If the condition ($article->getApothema() < 1) is truthy, the tags must be hidden, otherwise they should be shown. On desktop it should always show.
What this part of the code actually do is checking the availability of some items in a warehouse and displays accordingly green for plenty, orange for few and red when none is available. Any help would be greatly appreciated.
Use media queries. Adn class thatis hidden when screen has mobile width and then in php echo that class into elements you want hide.
#media screen and (max-width: 600px) {
.mobile{
display:none; #2 options how to hide elemet
visibility:hidden;
}
PHP
echo
foreach
<div class="mobile"></div>
```
You can use this library to detect if a user uses a mobile. To use it, you can do it this way.
// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if ( ($detect->isMobile()) && ($article->getApothema() < 1) ) {
//data show specifically for mobile
}else{
//show data for Desktop
}
I asked a question yesterday (Button That When Clicked Will Display Hidden Column in HTML Table). The Name is self-explanatory however, after hours of trying new things and failing I decided to research a different approach. Here is what came up with:
A button that when clicked will append a new class to an element
By doing this, we will toggle a column's visibility by using the 'display' function in css
I have the following HTML element:
echo "<td class =\"development\" id = 'tag$i'>test1</th>";
echo "<td class =\"development\" id = 'tag$i'>test2</th>";
echo "<td class =\"development\" id = 'tag$i'>test3</th>";
$i is the row number so picture each of these <td> being wrapped inside a forloop to create a column.
With Css:
.development{
text-align:center;
padding-left:10px;
display:block;
}
.hide{
display:none;
}
So this is where I will need your help. I propose a button that when clicked will run a JavaScript function that can append the '.hide' class to the td tags.
<button onclick="addCss()">Click me</button>
I am not sure how to write the JavaScript and if I need to pass any parameters such as the id's for the <td> tags.
document.getElementById('yourId').className += ' ClassName'
//To select elements by class name.
document.getElementsByClassName('yourId')
Note: the space after the first ' for the appended class name is important.
Why? : If you have the class name "class1" and append "class2" - It will result in "class1class2"
By adding the space, it will result in "class1 class2" and be recognized as two separate classes.
<button onclick="document.getElementById('yourId').className += ' ClassName';">Click me</button>
If you want to make a better solution.
<script>
function addCss(element) {
document.getElementById(element).className += ' ClassName';
}
</script>
Then just call the function like you originally had. You could even add a parameter for the class name itself.
to override a class document.getElementById("id").className = "newclass";
to add a new class document.getElementById("id").className += " anotherclass";
function addCss(){
document.getElementById("b").className = "hide";
}
function newCss(){
document.getElementById("b").className = "show";
}
body {
font-size: 3em;
background: honeydew;
}
.hide {
display: none;
}
.show {
display: table-cell;
}
<table>
<tr>
<td id=a style="background:skyblue">A</td>
<td id=b style="background:yellowgreen">B</td>
<td id=c style="background:gold">C</td>
<td id=d style="background:orangered">D</td>
</tr>
</table>
<button onclick="addCss()">hide B cell</button>
<button onclick="newCss()">show B cell</button>
Using jQuery, you can add this in the addCss function:
$('td').addClass('hide');
I have some problems with css manipulation with jQuery.
Here is what I need to do.
I have these three picture. Each are a representation of a person.
When we click on one of those, this div appears:
The problem is when I close it, the website should become as in the first picture, but the 3 picture don't reappear with $("class").css("visibility", "visible").
I don't know why.
The code (there is some PHP, it's done with Wordpress) :
Here is the code for the first picture (I will keep it short, it's not relevant) :
<div class="team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">
<img class="img_avocat" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>
Here is the code for the second picture :
$html .= '<div class="team-member-container" style="position:relative;z-index:-200">';
$html .= '<div class="avocat_container ' .$i. '" height="400px" style="width:1250px; height:442px;border:2px solid black;z-index:200;position:absolute;top:-5%;">
<div style="width:400px; display:inline; position:relative; z-index:200" class="photo_container"><img class="img_avocat_cont" style="display:inline; padding-top:23px" width="400px" height="200px" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>
<div style="display:inline-block; vertical-align:top;z-index:200; margin-left: 50px;position:relative;padding-top:23px;" class="container_description">
<h3 style="display:block;z-index:200; color:#f5a982;position:relative;">' . $name . '</h3>
<p style="display:block;z-index:200;position:relative;">' . $job_position . '</p>
<p style="display:block;z-index:200;position:relative;">DESCRIPTION</p>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">FORMATION</h4>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">Expertise</h4>
</div>
<div style="display:inline;" class="avocat_close"><img style="display:inline;float: right;padding-top: 20px; padding-right:20px;" src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/croix_fermeture.png" /></div>
<div style="display:inline; margin-left:28%;" class="avocat_mail"><img style="display:inline;padding-right:10px;"src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/mail.png" />Envoyer un message</div>
';
$html .= '<div class="testo team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">';
The Jquery code :
$(".avocat_container").hide();
var on = 0;
$(".team-member-container").click(function () {
if (on == 0) {
$(this).find(".avocat_container").fadeIn("slow");
$(".team-member").css("visibility", "hidden");
on = 1;
}
});
$(".photo_container").click(function() {
$(".avocat_container").fadeOut("slow");
$(".avocat_container").css("visibility", "hidden");
$(".testo").fadeIn("slow");
$(".team-member").style.visibility = "visible";
on = 0;
});
});
I would actually use min-height for this, and you'd also get a nice slide-down transition. Basic idea is to set your 2nd div to min-height:0;, then in JQuery use a click event on the other div to increase min-height. If you keep the z-index of the 2nd div higher than the first, it will appear overtop of it. To close it, attach a click event that resets min-height:0;. Add transition:min-height .4s ease; to your 2nd div and you've got a nice little effect!
This is because when you get elements by '$', it will return a jQuery object (an array-like object) even if there is only one element compatible with the condition, you can use console.log($(".team-member")) to see what you have.
In this case, just modify
$(".team-member").style.visibility = "visible";
to
$(".team-member").css("visibility", "visible");
or
$(".team-member")[0].style.visibility = "visible";
I am trying to pick div randomly. The only issue in my code is that it will randomly pick one empty div sometimes. I don't understand why it will echo one empty div sometimes. I have use chrome inspect element to check, there is no empty div. What did I do wrong on the foreach loop.
var divs = $(".widget").get().sort(function(){
return Math.round(Math.random())-0.5; //so we get the right +/- combo
}).slice(0,1);
$(divs).show();
.widget{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
foreach ($widgets as $widget){
echo'<div class="widget" >';
echo $content;
echo'</div>';
}
?>
There's no need for any weird sort function to get a random element out of the jQuery collection. Here's one way to do it with eq.
var $widgets = $('.widget');
var length = $widgets.length;
var div = $widgets.eq(Math.floor(Math.random() * length));
div.show();
.widget {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">1</div>
<div class="widget">2</div>
<div class="widget">3</div>
<div class="widget">4</div>
<div class="widget">5</div>
<div class="widget">6</div>
<div class="widget">7</div>
I have this contact us button sticking to the left of the screen which has a form attached which is hidden by default(because it has negative left of (-472px)).
Now When I click on it left becomes 0px and form slides in(using animate method) with the contact us button itself.
When I click again on the contact us button form and button slides back and hide having left property set to -472 again.
Now I want it also to hide if use click somewhere else on the screen instead of click just the button. I've tried but now its slides in and slides back and hide at the same time.
How can I make it work properly.
code where the problem is: jquery code which is not working is that the bottom of the code like
// clicking somewhere else ------------------------------------------------------------------
jQuery("body").click(function(e){
Full code
<style>
#form_contact_wrapper{position: absolute;top: 225px;left: -472px;z-index: 999;}
#contact-btn-div{top: 267px;float:left;}
#form_contact {z-index: 999;width: 450px;border: 1px solid;border-color: #BBB;padding: 10px;background-color: #FFF;float:left;}
#form_contact p.required{width: 450px;}
</style>
<?php if(Mage::helper('customer')->isLoggedIn() && Mage::app()->getStore()->getCode()=="default"):?>
<div id="form_contact_wrapper">
<div id="form_contact" class="form_contact">
<div id="form_contact_container" class="form_contact_container">
<div class="form_contact_div">
<?php
$filter = new Mage_Widget_Model_Template_Filter();
$_widget = $filter->filter('{{widget type="webforms/form" webform_id="' . Mage::getStoreConfig('webforms/contacts/webform') . '" template="webforms/default.phtml" redirect_url="www.google.com" }}');
echo $_widget;
?>
<a id="contact_new_question_link" href="javascript:void(0)" style="display: none;text-decoration: underline;"><span><span id = "contact_ask_another">Ask another Question</span></span></a>
</div>
</div>
</div>
<div id="contact-btn-div"><img src="<?php echo $this->getSkinUrl('images/contact-us.png'); ?>"></div>
</div>
<script type="text/javascript">
jQuery(function(){
var webform_id = <?php echo Mage::getStoreConfig('webforms/contacts/webform'); ?> ;
var webform_label = jQuery("#webform_"+webform_id+"_form form div ul li div label" );
var webform_fields = jQuery("#webform_"+webform_id+"_form form div ul li div label").next().children();
webform_label.css('width', '100px');
webform_fields.css("width","250px");
// with sucess text
if(jQuery('#form_contact_container .webforms-success-text').length == 1){
jQuery("#form_contact_wrapper").animate({'left': '0px'});
jQuery("#form_contact_wrapper").addClass('active');
jQuery('#form_contact_container .webforms-success-text').show();
jQuery('#form_contact_container .webforms-success-text p').attr('id','success_msg');
jQuery("a#contact_new_question_link").show();
jQuery("a#contact_new_question_link").addClass('active');
jQuery("#webform_"+webform_id+"_form").css({display:'none'});
jQuery("#contact-btn-div").toggle(function(){
jQuery("#form_contact_wrapper").removeClass('active');
jQuery("#form_contact_wrapper").animate({'left': '-472px'});
},function(){
jQuery("#form_contact_wrapper").animate({'left': '0px'});
jQuery("#form_contact_wrapper").addClass('active');
});
if(jQuery("ul.messages").length > 0){
//
jQuery("#feedback_btn_form").after(jQuery("ul.messages"));
}
}
// without success text
if(jQuery('#form_contact_container .webforms-success-text').length == 0){
jQuery("#contact-btn-div").click(function(){
if(jQuery("#form_contact_wrapper").hasClass('active')){
jQuery("#form_contact_wrapper").animate({'left': '-472px'});
jQuery("#form_contact_wrapper").removeClass('active');
}else{
jQuery("#form_contact_wrapper").animate({'left': '0px'});
jQuery("#form_contact_wrapper").addClass('active');
}
});
}
// new question
jQuery("a#contact_new_question_link").click(function(){
// jQuery("#form_contact_wrapper").animate({'left': '-472px'});
jQuery('#form_contact_container .std.webforms-success-text').css({display:'none'});
jQuery(this).hide();
jQuery("#webform_"+webform_id+"_form").show();
});
// clicking somewhere else ------------------------------------------------------------------
jQuery("body").click(function(e){
if(jQuery("#form_contact_wrapper").hasClass('active')){
if(jQuery(e.target).closest('#form_contact').length == 0 && e.target.id != '#contact-btn-div'){
jQuery("#form_contact_wrapper").removeClass('active');
jQuery("#form_contact_wrapper").animate({'left': '-472px'});
}
}
});
});
</script>
<?php endif; ?>
Please suggest something. Thanks a lot.
Use .blur() method. The blur event is sent to an element when it loses focus. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page. Read more