Develop Reference

Carousel need to start from middle slide on page load

I have using Multi Carousel to display complete months dates in a slider. Each date some data be hide on click. When I browse to Multi Carousel clicked date is today,s date, Means active class for slides is current date.
But as slider have 30 days. so slider always start from day 1. I always need to slide it to current date by clicking next arrow.
Like today is sep-26. If you check following page you find a date slider there which is on sep-1 now. so to get sep-26 you need to slide next. http://prosport.guru/ps/game.php
I want that when page load slider should moves to current date auto. I have add auto class to current date slide but it did not work.
Following is my code for Multi Carousel.
<?php
$page2 = $_SERVER["PHP_SELF"];
$page2 = explode("/", $page2);
$page2 = $page2[count($page2) - 1];
$id_sport2 = $_GET["id_sport"];
$m = date("m");
$day = date("d");
$year = date("Y");
$dates = array();
$dates2 = array();
$tmp = array();
for ($i = 1; $i < 32; $i++) {
if ($i < 10) {
$ii = "0$i";
} else {
$ii = $i;
}
$date = "$year-$m-$ii";
//$date = date("Y-m-d", strtotime($date));
if ($i % 3 != 0) {
array_push($tmp, $date);
if ($i == 60) {
if (count($tmp != 0)) {
array_push($dates2, $tmp);
}
}
} else {
array_push($tmp, $date);
array_push($dates2, $tmp);
$tmp = array();
}
array_push($dates, $date);
}
///print_r($dates2);
?>
<div class="row" style="border:1px solid silver; background: #a0a0a0; color: white; ">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="3" id="MultiCarousel2" data-interval="1000" >
<div class="MultiCarousel-inner">
<?php
$cpt = 0;
for ($i = 0; $i < count($dates2); $i++) {
$line = $dates2[$i];
$today = date("Y-m-d");
if (empty($_GET["date"])) {
$goto = $today;
if (in_array($today, $line)) {
$active = "active";
} else {
$active = "";
}
} else {
$dt = $_GET["date"];
$goto = $dt;
if (in_array($dt, $line)) {
$active = "active";
} else {
$active = "";
}
}
for ($x = 0; $x < count($line); $x++) {
$el = $line[$x];
if (!empty($_GET["date"])) {
$dt = $_GET["date"];
if ($el == $dt) {
$color = "red";
} else {
$color = "white";
}
} else {
if ($el == $today) {
$color = "red";
} else {
$color = "white";
}
}
$href = "$page2?id_sport=$id_sport2&date=$el";
if ($x == 0) {
//echo "<div class='col-lg-1 col-xs-1'> </div>";
//echo "<div class='col-lg-10 col-xs-10'>";
}
/* echo ' <div class="col-md-4 col-xs-4 col-lg-4 ">
'.$el.'</div>';
*/
if ($x == 2) {
//echo "</div>";
}
?>
<div class="item " style="text-align:center">
<a href="<?php echo $href; ?>" >
<p class=" sportName mydate p-date" real="<?php echo $el; ?>" style="color:white; font-size: 12px; text-align: center;" >
<?php
$date = $el;
$month_name = ucfirst(strftime("%b", strtotime($date)));
$day_number = ucfirst(strftime("%d", strtotime($date)));
echo $month_name . ' ' . $day_number;
?>
</p>
</a>
</div>
<?php
}
}
echo "<input type='hidden' value='$goto' id='cd'>";
?>
</div>
<button class="btn btn-primary btn-sm leftLst" style="border-radius: 0px; top: calc(64% - 20px);"><</button>
<button class="btn btn-primary btn-sm rightLst fw" style="border-radius: 0px; top: calc(64% - 20px);">></button>
</div></div>
<script>
$(document).ready(function () {
var cd = $("#cd").val();
$(".mydate").each(function () {
var cd_tmp = $(this).attr("real");
if (cd_tmp != cd) {
//alert(cd_tmp+" is different from "+cd);
//$(".fw").click();
} else {
$(this).addClass("tag tag-danger active");
//break;
}
})
})
</script>

This jquery script will move it to the current date on page load.
$(function() {
// Get month and day, ex. "Sep 21"
var monthAndDay = new Date().toLocaleString("en-us", { month: "short" }) + ' ' + new Date().getDate();
// Locate the carousel item using month and day string
var $list = $('#MultiCarousel2 > div .item');
var $carouselToday = $('#MultiCarousel2 > div .item a p:contains('+monthAndDay+')');
var $parent = $carouselToday.closest('.item');
var index = $list.index( $parent );
var itemWidth = $list.eq(0).width();
var position = (index * itemWidth) * -1;
$('#MultiCarousel2 > div').css({"transition": "0s", "transform": "translate("+ position +"px)"});
$('#MultiCarousel2 > div').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
$(this).css({"transition": "1s ease all"})
});
});

Yii2-dynamicforms and javascript

I have wbraganca dynamic forms working in Yii2, but I need to add a little function to multiply 2 fields and put value in a third, and do that in every new dynamic form (suppose field 1 is price, field 2 is amount and field 3 is total).
With the code I have I'm able to do that but only on the first dynamic form.
<?php
$script = <<< JS
$('#itemsfactura-{$i}-cantidad').change(function(){
var cantidad = $(this).val();
var precio = $('#itemsfactura-{$i}-precio').val();
$('#itemsfactura-{$i}-total_item').val(cantidad * precio);
});
JS;
$this->registerJs($script);
?>
This is the code for the dynamic form fields:
...
<div class="row">
<div class="col-sm-4">
<?= $form->field($modelItemFactura, "[{$i}]precio")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($modelItemFactura, "[{$i}]cantidad")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($modelItemFactura, "[{$i}]total_item")->textInput(['maxlength' => true]) ?>
</div>
</div>...

Form
<div class="col-sm-4">
<?= $form->field($modelItemFactura, "[{$i}]precio")->textInput(['maxlength' => true, 'onchange' => 'getProduct($(this))', 'onkeyup' => 'getProduct($(this))']) ?>
</div>
<div class="col-sm-4">
<?= $form->field($modelItemFactura, "[{$i}]cantidad")->textInput(['maxlength' => true, 'onchange' => 'getProduct($(this))', 'onkeyup' => 'getProduct($(this))']) ?>
</div>
JS
function getProduct(item) {
var index = item.attr("id").replace(/[^0-9.]/g, "");
var total = current = next = 0;
var id = item.attr("id");
var myString = id.split("-").pop();
if(myString == "precio") {
fetch = index.concat("-cantidad");
} else {
fetch = index.concat("-precio");
}
temp = $("#itemsfactura-"+fetch+"").val();
if(!isNaN(temp) && temp.length != 0) {
next = temp;
}
current = item.val();
if(isNaN(current) || current.length == 0) {
current = 0;
}
if(!isNaN(current) && !isNaN(next)) {
total = parseInt(current) * parseInt(next);
}
totalItem = "itemsfactura-".concat(index).concat("-total_item");
$("#"+totalItem+"").val(total);
}

Opencart customization: server-side script for rating

I've added a custom table into the Opencart database, where I have a field/column, called average_rating (value = null to 5).
In my (custom) template (.tpl file) I've added a code to get and show the rating of current record from database.
Here is the code within .tpl file:
<div class="form-group">
<label class="col-sm-2 control-label" for="input-average_rating"><?php echo $entry_average_rating; ?></label>
<div class="col-sm-10">
<input type="hidden" name="average_rating" value="<?php echo $average_rating; ?>" id="input-average_rating" />
<?php for ($i = 0; $i < $average_rating; $i++) { ?>
<div class="rating_hover" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
<?php for ($i = $average_rating; $i <= 4; $i++) { ?>
<div class="rating_normal" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
</div>
</div>
For the blue-stars, I use .rating_hover class, for the grey-ones: .rating_normal class (see the picture below).
All this stuff works fine. But now I want to do something I have no experience with and I would appreciate any tip concerning my question.
Question: When a mouse pointer is over a grey star, it must become blue, like the ones before it. And when clicked on a star, my hidden input must get the value of title attribute of the clicked div-element. I wouldn't like to write a client-side Javascript to do this. Could somebody give a tip on how to do this with JSON or AJAX... or somehow please?
I mean: something like this:
$('div[id=\'r*\']').onmouseover({
// for (i=$average_rating; i<=[current_id]; i++) {
// ??? document.getElementById('r[i]').style.ClassName = 'someclass';
});
Javascript-alternative works fine, but I still have problems with JSON-script:
This is how javascript works:
Inside every div-element I added following commands:
<div ... onclick="rOnClick(<?php echo ($i+1) ?>);" onmouseover="rOnMouseOver(<?php echo ($i+1) ?>);" onmouseout="rOnMouseOut(<?php echo ($i+1) ?>);" ... >
And my Javascript functions are now, as follows:
<script type="text/javascript">
function rOnMouseOver(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
}
function rOnMouseOut(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = 1; i <= ar; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
function rOnClick(id) {
document.getElementById('input-average_rating').value = id;
for(i = 1; i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (id+1); i <= 5; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
</script>

Please add another css class 'rating' in all rating divs. Also you will be needed to add a different class 'rated' for existing/clicked rated value. Then add following script:
$('.rating').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('rating_over');
$(this).nextAll().removeClass('rating_normal');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
$('.rated').addClass('ratings_over'); // back to rated one
}
);
$('.rating').bind('click', function() {
$('.rating').removeClass('rated');
$(this).addClass('rated');
$('#input-average_rating').val($(this).attr('title'));
});

Submenu keep active when user click on it and open in a new page

I have problem when a visitor clicks on a submenu and the link opens in a new page, so I want to keep that submenu active on that page.
I have css class active and javascript for opening it, what I need is to make it with php to be active.
This is UL with class:
This is my code. Can it be done with php or with javascript.
<ul>
<?php
$qKategori = ("SELECT * FROM kategori WHERE kprind = 0");
$rKategori = mysqli_query($dbc, $qKategori);
if ($rKategori) {
while ($exKat = mysqli_fetch_array($rKategori, MYSQLI_ASSOC)){
$emrikategorise = $exKat['kemri'];
$idkategori = $exKat['kid'];
$idprind = $exKat['kprind'];
?>
<li><?=$emrikategorise;?>
<ul>
<?php
$qPrind = ("SELECT * FROM kategori WHERE kprind = '".$idkategori."'");
$rPrind = mysqli_query($dbc,$qPrind);
while($prind = mysqli_fetch_array($rPrind)) {
?>
<li><?=$prind['kemri']?> </li>
<?php
}
mysqli_free_result($rPrind);
?>
</ul>
</li>
<?php }
mysqli_free_result($rKategori);
}
?>
</ul>
You can see menu on the left in The website is www.sitimobil.mk

You probably will need to build the array before outputting to be able to determine which menus should be active. You can also combine it with an optimization of the query to not have to do 1 query per category.
Something like:
$active = isset($_GET['kid'] ? $_GET['kid'] : -1;
$tree = array();
$list = array();
$qKategori = ("SELECT * FROM kategori ORDER BY kprind");
$rKategori = mysqli_query($dbc, $qKategori);
if ($rKategori) {
while ($exKat = mysqli_fetch_array($rKategori, MYSQLI_ASSOC)){
$id = $exKat['kid'];
//To prevent numerical array with unused space
$name = 'kategori'.$exKat['kid'];
$list[$name] = $exKat;
//Calculate depth to see if the menu is a sub..sub..sub menu etc.
$parent = $list[$name]['kprind'];
if($parent == 0) {
$list[$name]['depth'] = 0;
$list[$name]['childCount'] = 0;
}
else {
$list['kategori'.$parent]['childCount']++;
$list[$name]['depth'] = $list['kategori'.$parent]['depth']+1; //Increment
}
if($id == $active) {
$list[$name]['active'] = true;
while($parent != 0) {
$parentName = 'kategori'.$parent;
$list[$parentName]['active'] = true;
$parent = $list[$parentName]['kprind'];
}
}
else
$list[$name]['active'] = false;
}
mysqli_free_result($rPrind);
//Once we have that we can output the results...
function output_menu($list, $parent = 0, $active = false)
$activeClass = $active ? ' class="active"' : '';
echo '<ul'.$activeClass.'>';
foreach($list as $row){
if($row['kprind'] != $parent) continue;
$link = $row['kprind'] == 0 ? '#' : 'kategori.php?kid='.$row['kid'];
echo '<li>'.$row['kemri'].'';
if($row['childCount'] > 0)
output_menu($list, $row['kprind'], $row['active']);
echo '</li>';
}
echo '</ul>';
}
output_menu($list);
}
This is still a bit rough but should do the trick. It can probably be optimized so that we don't have to go through the list too many times but has the benefit of not having to request too many calls to the database. That should result in a lighter workload for the DB and faster output.

Magento Images switcher for custom options

I have created a custom options image switcher for Magento, script compares value from options in drop-down with all image names related to product, and finds the most similar one, you can see an example here
The problem is how to add the "selected" option image to the cart, or better to say how to apply that image instead of the default thumbnail in the cart?
anyway here is the complete code - maybe someone can even find this part useful :)
<?php
// load all images related to product
$product = $this->getProduct();
$galleryData = $product->getData('media_gallery');
$images_array = array();
foreach ($galleryData['images'] as $image) {
array_push($images_array, $image['file']);
}?>
<?php
$colour_select_id = '';
$custom_options_arr = array();
foreach ($_options as $_option) {
if ($_option->getTitle() == 'Helmet Color/Design' || $_option->getTitle() == 'Color') {
$colour_select_id = 'select_' . $_option->getId();
$values = $_option->getValues();
foreach ($values as $value) {
$current_option = ($value->getData());
$custom_options_arr[$current_option['option_type_id']] = $current_option['title'];
}
}
}
// $custom_options_arr now holds key=>value pairs of option_type_id => title
$custom_images_to_output = array();
foreach ($custom_options_arr as $key => $value) {
$best_match = $images_array[0];
for ($i = 1; $i < count($images_array); $i++) {
if (similar_text(strtoupper($images_array[$i]), strtoupper($value)) > similar_text(strtoupper($best_match), strtoupper($value))) {
$best_match = $images_array[$i];
}
}
$custom_images_to_output[$key] = $best_match;
}
$base_url = Mage::getBaseUrl('media') . 'catalog/product';
?>
<?php if ($colour_select_id) { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
var opt_object = <?php echo json_encode($custom_images_to_output); ?>;
var base_path = '<?= $base_url;?>';
jQuery("#<?= $colour_select_id ?>").change(function() {
var optionValue = jQuery(this).attr('value');
if (optionValue) {
var optionValueText = jQuery.trim(jQuery('#<?= $colour_select_id ?> :selected').text());
if (opt_object.hasOwnProperty(optionValue)) {
optionValueText = opt_object[optionValue];
}
jQuery("#image").fadeOut(function() {
jQuery(this).load(function() {
jQuery(this).fadeIn(); });
jQuery(this).attr("src", base_path + optionValueText);
jQuery('#image-zoom').attr("href", base_path + optionValueText);
});
}
});
});
</script>