I'm creating simple quiz plugin, but now I'm in dilemma, because don't have an idea how to make options to auto-scroll to the top of the Explanation Box after visitor choose an answer (right or wrong, explanation box is same with same content. Note - explainer box is hidden until visitor clicks with mouse on checkbox of any offered answer.
Below is JavaScript code I have so far:
var wpvqgr = wpvqgr || {};
(function($)
{
$(document).ready(function()
{
wpvqgr.selectAnswer = function($question, question_id, $answer, answer_id)
{
// Don't let the user play twice the same question!
if ($answer.hasClass('wpvqgr-disabled-answer') && !wpvqgr.vars.quiz.settings.trivia_hiderightwrong) {
return;
}
// Right or wrong?
var rightAnswers = wpvqgr.getRightAnswers(question_id);
var isRight = (rightAnswers.indexOf(answer_id) > -1);
// Store data
var _answers = wpvqgr.getStore('answers') || { 'questions' : [] };
_answers.questions[question_id] = {
'answer_id' : answer_id,
'isRight' : isRight,
'rightAnswers' : rightAnswers,
};
wpvqgr.setStore('answers', _answers);
// Display Right or Wrong answers
if (wpvqgr.vars.quiz.settings.trivia_hiderightwrong != 'yes')
{
// First, disable every answers
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer').addClass('wpvqgr-disabled-answer');
// Add explanation
var $explanation = $question.find('div.wpvqgr-explanation');
$explanation.find('div.wpvqgr-explanation-content').html(wpvqgr.vars.quiz.questions[question_id].wpvqgr_quiz_questions_explanation);
if (isRight)
{
$explanation.find('h3.wpvqgr-thats-right').show();
$answer.addClass('wpvqgr-right-answer');
}
else
{
$explanation.find('h3.wpvqgr-thats-wrong').show();
$answer.addClass('wpvqgr-wrong-answer');
$.each(rightAnswers, function(index, answer_id){
$question.find('.wpvqgr-answer[data-id=' + answer_id + ']').addClass('wpvqgr-right-answer');
});
}
$explanation.show();
}
else
{
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer');
$answer.addClass('wpvqgr-selected-answer');
}
// Update visual checkbox
$question.find('div.wpvqgr-checkbox-picture').removeClass('wpvqgr-checkbox-checked-picture');
$answer.find('div.wpvqgr-checkbox-picture').addClass('wpvqgr-checkbox-checked-picture');
// Not a visual class, just marked as
$answer.addClass('wpvqgr-is-selected-answer');
};
wpvqgr.computeResults = function()
{
var answers = wpvqgr.getStore('answers') || { 'questions' : [] };
var finalScore = 0;
// Score
$.each(answers.questions, function (q_id, answer_data) {
if (answer_data.isRight) {
finalScore++;
}
});
// Appreciation
var appreciation = wpvqgr.getAppreciation(finalScore);
// Store global data for Facebook, page refresh and other stuff
wpvqgr.setStore('finalScore', finalScore);
wpvqgr.setStore('appreciation', appreciation);
};
//Autoscroll
/**
* Integrate results in view
* #return {[type]} [description]
*/
wpvqgr.integrateResults = function ()
{
wpvqgr.parseResults('quizname', wpvqgr.vars.quiz.general.name);
wpvqgr.parseResults('score', wpvqgr.getStore('finalScore'));
wpvqgr.parseResults('total', wpvqgr.getStore('answers').questions.length);
wpvqgr.parseResults('description', wpvqgr.getStore('appreciation').content);
}
wpvqgr.getAppreciation = function(score)
{
var finalAppreciationId = -1;
var finalAppreciationScoreStep = 9999;
$.each(wpvqgr.vars.quiz.appreciations, function (ap_id, data)
{
var app_score = parseInt(data.score);
if (score <= app_score && finalAppreciationScoreStep > app_score)
{
finalAppreciationScoreStep = app_score;
finalAppreciationId = ap_id;
}
});
// No appreciation found!
if (finalAppreciationId == -1) {
return { 'content':'', 'redirect':'', 'picture':'', 'score':-1 }
} else {
return wpvqgr.vars.quiz.appreciations[finalAppreciationId];
}
};
wpvqgr.getRightAnswers = function(question_id)
{
var rightAnswers = [];
var answers = wpvqgr.vars.quiz.questions[question_id]['wpvqgr_quiz_questions_answers'];
$.each(answers, function(id, data) {
if (data['wpvqgr_quiz_questions_answers_right']) {
rightAnswers.push(id);
}
});
return rightAnswers;
};
wpvqgr.getFinalScore = function()
{
return wpvqgr.getStore('finalScore');
};
});
})(jQuery);
/**
* Store
*
* questions[$id] = $answer_id
*
*
*
*/
<?php global $wpvqgr_quiz, $wpvqgr_quiz_columns, $wpvqgr_resources_dir_url, $wpvqgr_skin_dir_url; ?>
<!-- Load CSS Skin Theme -->
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'css/bootstrap-wrapper.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'icons/fa/css/font-awesome.min.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'css/fo-style.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_skin_dir_url . 'style.css'; ?>'); </style>
<!-- Custom style -->
<style>
<?php if ($wpvqgr_quiz->getSetting('progessbarcolor') != ''): ?>
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-playagain,
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-start-button,
.wpvqgr-wrapper div.wpvqgr-continue button.wpvqgr-button,
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-askinfo-submit,
.wpvqgr-progress .progress-bar {
background-color:<?php echo $wpvqgr_quiz->getSetting('progessbarcolor'); ?>;
}
<?php endif; ?>
<?php echo $wpvqgr_quiz->getSetting('global_custom_css'); ?>
</style>
<!-- Facebook SDK -->
<script type="text/javascript">
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- / Prepare sharing options -->
<?php echo apply_filters('wpvqgr_public_version', "<!-- Quiz Created with WP Viral Quiz (v".WPVQGR_VERSION.") - https://www.ohmyquiz.io/discover -->"); ?>
<a name="wpvqgr"></a>
<div class="wpvqgr-wrapper">
<div class="container-fluid">
<?php if ($wpvqgr_quiz->getSetting('startbutton') && !$wpvqgr_resultsOnly): ?>
<div class="wpvqgr-intro">
<?php if ($wpvqgr_quiz->getSetting('startbuttonintro')): ?>
<p><?php echo $wpvqgr_quiz->getSetting('startbuttonintro'); ?></p>
<?php endif ?>
<button class="wpvqgr-start-button wpvqgr-button"><?php echo $wpvqgr_quiz->getSetting('customlabel_startbutton'); ?></button>
</div>
<?php endif ?>
<div id="wpvqgr-<?php echo $wpvqgr_quiz->getId(); ?>" class="wpvqgr <?php echo $wpvqgr_quiz->getType(); ?>">
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_before')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_before')); ?>
</div>
<?php if ($wpvqgr_quiz->getPageCounter() > 1 && in_array('top', $wpvqgr_quiz->getSetting('progessbar'))): ?>
<!-- Progress bar -->
<div class="wpvqgr-progress wpvqgr-progress-top progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endif ?>
<?php if (!$wpvqgr_resultsOnly): ?>
<div class="wpvqgr-page-0 wpvqgr-page" data-id="0">
<?php
$wpvqgr_questions = $wpvqgr_quiz->getQuestionsAndBlocks();
$q_real_id = -1;
foreach($wpvqgr_questions as $q_id => $question):
// Type and content
$q_type = $question['_type'];
$q_content = ($q_type == 'wpvqgr_quiz_htmlblocks') ? $question['wpvqgr_quiz_htmlblocks_content'] : $question['wpvqgr_quiz_questions_content'];
// Real ID (ignore HTML blocks)
if ($q_type == 'wpvqgr_quiz_questions') {
$q_real_id++;
}
// Pagination
$q_isTherePage = ($question['wpvqgr_quiz_questions_addpage'] && isset($wpvqgr_questions[$q_id+1]));
$currentPage_id = (!isset($currentPage_id)) ? 0 : $currentPage_id;
// Picture
if ($q_type == 'wpvqgr_quiz_questions') {
$q_picture_id = $question['wpvqgr_quiz_questions_picture'];
$q_picture_info = WPVQGR_Snippets::wpGetAttachment($q_picture_id);
$q_picture_url = wp_get_attachment_url($q_picture_id);
}
?>
<div class="row">
<div class="col-sm-12">
<!-- Global ads between questions -->
<?php if ( $q_real_id > 0 && $wpvqgr_quiz->getSetting('global_ads_between_count') > 0 && ($q_real_id % $wpvqgr_quiz->getSetting('global_ads_between_count') == 0) ): ?>
<?php echo $wpvqgr_quiz->getSetting('global_ads_between_content'); ?>
<?php endif; ?>
<!-- HTML Blocks -->
<?php if ($q_type == 'wpvqgr_quiz_htmlblocks'): ?>
<div class="wpvqgr-htmlblock">
<?php echo do_shortcode($q_content); ?>
</div>
<?php else: ?>
<!-- Regular question -->
<div class="wpvqgr-question" data-id="<?php echo $q_real_id; ?>">
<div class="wpvqgr-question-label"><?php echo do_shortcode(nl2br($q_content)); ?></div>
<?php if (is_numeric($q_picture_id)): ?>
<div class="wpvqgr-question-picture">
<figure class="figure">
<img src="<?php echo $q_picture_url; ?>" class="figure-img img-fluid" alt="<?php echo htmlentities($q_picture_info['alt']); ?>" />
<?php if ($q_picture_info['caption'] != ''): ?>
<figcaption class="figure-caption"><?php echo $q_picture_info['caption']; ?></figcaption>
<?php endif; ?>
</figure>
<?php if (function_exists ('adinserter')) echo adinserter (1); ?> <!-- / First Add Code -->
</div>
<?php endif ?>
<div class="row">
<?php
$smartColumns = WPVQGR_Snippets::getSmartColumnsSize($question, $wpvqgr_quiz_columns);
foreach ($question['wpvqgr_quiz_questions_answers'] as $a_id => $answer):
// Answer
$a_label = $answer['wpvqgr_quiz_questions_answers_answer'];
// Picture
if ($smartColumns['displayPicture'])
{
$a_picture_id = $answer['wpvqgr_quiz_questions_answers_picture'];
if ($a_picture_id == 0) {
$a_picture_info = array('alt' => '', 'caption' => '');
$a_picture_url = WPVQGR_PLUGIN_URL . '/resources/images/picture-placeholder.jpg';
} else {
$a_picture_info = WPVQGR_Snippets::wpGetAttachment($a_picture_id);
$a_picture_url = wp_get_attachment_image_src($a_picture_id, 'wpvqgr-square-answer');
$a_picture_url = $a_picture_url[0];
}
}
?>
<div class="wpvqgr-answer-col col-xs-<?php echo $smartColumns['xs-size']; ?> col-md-<?php echo $smartColumns['md-size']; ?>">
<div class="wpvqgr-answer" data-id="<?php echo $a_id; ?>">
<?php if ($wpvqgr_quiz->getType() == 'wpvqgr_quiz_perso'): ?>
<!-- Multipliers -->
<?php foreach ($answer['wpvqgr_quiz_questions_answers_multipliers'] as $p_id => $value): ?>
<input type="hidden" name="wpvqgr_answer_multipliers[]" data-pid="<?php echo (int)$p_id; ?>" value="<?php echo (int)$value; ?>" />
<?php endforeach ?>
<?php endif; ?>
<?php if ($smartColumns['displayPicture']): ?>
<div class="wpvqgr-answer-picture">
<figure class="figure">
<img src="<?php echo $a_picture_url; ?>" class="figure-img img-fluid" alt="<?php echo htmlentities($a_picture_info['alt']); ?>" />
<?php if ($a_picture_info['caption'] != ''): ?>
<figcaption class="figure-caption"><?php echo $a_picture_info['caption']; ?></figcaption>
<?php endif; ?>
</figure>
</div>
<?php endif ?>
<?php if ($a_label != ''): ?>
<div class="wpvqgr-checkbox">
<div class="wpvqgr-checkbox-picture wpvqgr-checkbox-unchecked-picture"></div>
<span class="wpvqgr-answer-label"><?php echo do_shortcode(stripslashes($a_label)); ?></span>
<hr class="wpvqgr-clear" />
</div>
<?php endif ?>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="row"><div class="col-sm-12">
<div class="wpvqgr-explanation">
<center><h6>⇩ SCROLL DOWN TO CONTINUE ⇩</h6></center>
<h3 class="wpvqgr-thats-right"><?php echo $wpvqgr_quiz->getSetting('customlabel_right'); ?></h3>
<h3 class="wpvqgr-thats-wrong"><?php echo $wpvqgr_quiz->getSetting('customlabel_wrong'); ?></h3>
<div class="wpvqgr-explanation-content"></div>
</div>
</div>
</div>
</div> <!-- .question -->
<?php endif; ?>
</div> <!-- / col -->
</div> <!-- / row -->
<div class="autoscroll>">
</div>
<div class="wpvqgr-continue">
<?php if (function_exists ('adinserter')) echo adinserter (2); ?> <!-- / Second Add Code -->
<button class="wpvqgr-button" style="background:<?php echo $wpvqgr_quiz->getSetting('progessbarcolor'); ?>;">
<?php echo $wpvqgr_quiz->getSetting('customlabel_continuebutton'); ?>
</button>
</div>
<?php
if ($q_isTherePage): $currentPage_id++;
?>
</div> <!-- close previous page -->
<div class="wpvqgr-page-<?php echo $currentPage_id; ?> wpvqgr-page" data-id="<?php echo $currentPage_id; ?>">
<?php endif ?>
<?php endforeach; ?>
</div> <!-- Final page close -->
<?php endif; ?>
<a id="wpvqgr-resultarea"></a>
<!-- Force to share -->
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="wpvqgr-forcetoshare">
<h3><?php echo __("Share the quiz to show your results !", 'wpvq'); ?></h3>
<button class="wpvqgr-button wpvqgr-social-facebook wpvqgr-force-share" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_description'); ?>"><i class="fa fa-facebook-square" aria-hidden="true"></i> <?php echo __('Share on Facebook', 'wpvq'); ?></button>
</div>
</div>
</div>
<!-- Force to give some informations -->
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="wpvqgr-askinfo">
<h3><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfotitle'); ?></h3>
<form action="" method="GET">
<?php foreach($wpvqgr_quiz->getSetting('askinfo_fields') as $field): ?>
<?php
$field_slug = WPVQGR_Snippets::slugify($field['wpvqgr_settings_askinfo_fields_field_label']);
$is_required_field = ($field['wpvqgr_settings_askinfo_fields_field_optional'] != 'yes');
?>
<div class="form-group">
<label for="wpvqgr-<?php echo $field_slug; ?>"><?php echo $field['wpvqgr_settings_askinfo_fields_field_label']; ?></label>
<input type="<?php echo $field['wpvqgr_settings_askinfo_fields_field_type']; ?>" class="form-control" name="<?php echo $field_slug; ?>" id="wpvqgr-<?php echo $field_slug; ?>" <?php if($is_required_field): ?>required="true"<?php endif; ?>/>
</div>
<?php endforeach; ?>
<?php if ($wpvqgr_quiz->getSetting('global_gdpr_enabled') == 1): ?>
<div class="form-check gdpr-area">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="wpvq_gpdr" id="wpvq_gpdr_checkbox" required="true" />
<?php echo $wpvqgr_quiz->getSetting('global_gdpr_message'); ?>
</label>
</div>
<?php endif ?>
<div class="form-group" style="text-align:center;">
<button type="submit" class="wpvqgr-button wpvqgr-askinfo-submit"><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfobutton'); ?></button>
</div>
</form>
<?php if ($wpvqgr_quiz->getSetting('askinfo_ignore')): ?>
<p class="wpvqgr-askinfo-ignore"><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfoignore'); ?></p>
<?php endif ?>
</div>
</div>
</div>
<!-- Show results -->
<div class="row">
<div class="col-sm-12">
<div class="wpvqgr-results">
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_aboveresults')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_aboveresults')); ?>
</div>
<div class="wpvqgr-results-box <?php echo $wpvqgr_quiz->getType(); ?>">
<div class="wpvqgr-top-result">
<div class="wpvqgr-quiz-name"><?php echo stripslashes($wpvqgr_quiz->getName()); ?></div>
<h3><?php echo $wpvqgr_quiz->getSetting('global_template_result'); ?></h3>
<div class="wpvqgr-result-description">%%description%%</div>
</div>
<div class="wpvqgr-additional-results">
<div class="wpvqgr-additional-results-template">
<h3><?php echo $wpvqgr_quiz->getSetting('global_template_additional_results'); ?></h3>
<div class="wpvqgr-result-description">%%description%%</div>
</div>
</div>
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_afterresults')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_afterresults')); ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('displaysharing')): ?>
<div class="wpvqgr-sharing">
<?php if (!in_array('facebook', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-facebook" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_description'); ?>"><i class="fa fa-facebook-square" aria-hidden="true"></i> <?php echo __('Share on Facebook', 'wpvq'); ?></button>
<?php endif; ?>
<!-- Twitter -->
<?php if (!in_array('twitter', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-twitter" data-tweet="<?php echo $wpvqgr_quiz->getSetting('global_template_twitter'); ?>" data-mention="<?php echo $wpvqgr_quiz->getSetting('twittermention'); ?>" data-hashtag="<?php echo $wpvqgr_quiz->getSetting('twitterhashtag'); ?>"><i class="fa fa-twitter-square" aria-hidden="true"></i> <?php echo __('Share on Twitter', 'wpvq'); ?></button>
<?php endif ?>
<!-- VK -->
<?php if (!in_array('vk', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-vk" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_vk_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_vk_description'); ?>"><i class="fa fa-vk" aria-hidden="true"></i> <?php echo __('Share on VK', 'wpvq'); ?></button>
<?php endif ?>
</div>
<?php endif; ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('playagain')): ?>
<button class="wpvqgr-button wpvqgr-playagain"><?php echo $wpvqgr_quiz->getSetting('customlabel_playagainbutton'); ?></button>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($wpvqgr_quiz->getPageCounter() > 1 && in_array('bottom', $wpvqgr_quiz->getSetting('progessbar'))): ?>
<!-- Progress bar -->
<div class="wpvqgr-progress wpvqgr-progress-bottom progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endif ?>
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_after')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_after')); ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('promote')): ?>
<div class="wpvqgr-promote">
<p>
<?php _e("This quiz has been created with", 'wpvq'); ?> WordPress Viral Quiz
</p>
</div>
<?php endif; ?>
</div> <!-- / #wpvqgr -->
</div> <!-- / container -->
<!-- Loading -->
<div class="row">
<div class="wpvqgr-loader">
<p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only"><?php _e("Loading...", 'wpvq'); ?></span>
</p>
</div>
</div>
</div> <!-- / Bootstrap wrapper -->
I tried with dummy DIV element, but without success (to have it as an anchor, because explainer element is invisible).
Code samples I tried so far are:
$('wpvqgr-answer').click(function() {
$('html,body').animate({scrollTop: ('#autoscroll').offset().top - staticHeaderHeight}, 'slow');
return true;
});
And:
$('.wpvqgr-answer').click(function () {
$("html, body").animate({ scrollTop: $(el).closest(':visible').offset().top}, 400);
return true;
});
And, this was desperate act of self destruction:
$('.wpvqgr-answer').click(() => {
$('.wpvqgr-explanation').toggle('smooth', () => {
$('.wpvqgr-explanation').get(0).scrollIntoView();
});
});
I hope you have some kind of overview now, even in basic sense. Any guidance appreciated. Thank you
EDIT: Box creation conditions are within JS and parsed to HTML code, example below:
// Add explanation
var $explanation = $question.find('div.wpvqgr-explanation');
$explanation.find('div.wpvqgr-explanation-content').html(wpvqgr.vars.quiz.questions[question_id].wpvqgr_quiz_questions_explanation);
if (isRight)
{
$explanation.find('h3.wpvqgr-thats-right').show();
$answer.addClass('wpvqgr-right-answer');
}
else
{
$explanation.find('h3.wpvqgr-thats-wrong').show();
$answer.addClass('wpvqgr-wrong-answer');
$.each(rightAnswers, function(index, answer_id){
$question.find('.wpvqgr-answer[data-id=' + answer_id + ']').addClass('wpvqgr-right-answer');
});
}
$explanation.show();
}
else
{
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer');
$answer.addClass('wpvqgr-selected-answer');
}
<div class="row"><div class="col-sm-12">
<div class="wpvqgr-explanation">
<center><h6>⇩ SCROLL DOWN TO CONTINUE ⇩</h6></center>
<h3 class="wpvqgr-thats-right"><?php echo $wpvqgr_quiz->getSetting('customlabel_right'); ?></h3>
<h3 class="wpvqgr-thats-wrong"><?php echo $wpvqgr_quiz->getSetting('customlabel_wrong'); ?></h3>
<div class="wpvqgr-explanation-content"></div>
</div>
</div>
</div>
Simple piece of code worked as charm for me, just enough to achieve functionality and in the same time not to complicate too much:
const goToTop = () => window.scrollTo(0, 950);
goToTop();
This is very quick and "clean" solution for one who does not need complicated function.
I am attempting to 'check' the the 'AC:Front' box from a button click on the below website. I tried changing the checkbox to 'checked' and I also tried changing the encompassing to class="checked".
The goal is to eventually collect the inputted VIN, run it through a decoder and use the data to fill the page.
Here is the website
HTML
<div class="stm-single-feature">
<div class="heading-font">Comfort</div>
<div class="feature-single">
<label>
<input type="checkbox" value="A/C: Front" name="stm_car_features_labels[]"/>
<span>A/C: Front</span>
</label>
</div>
CSS
div.checker span.checked {
background-position: -16px 0; }
PHP
<?php
if ($items) {
if (!empty($id)) {
$features_car = get_post_meta($id, 'additional_features', true);
$features_car = explode(',', $features_car);
} else {
$features_car = array();
}
foreach ($items as $item) { ?>
<?php if(isset($item['tab_title_single'])): ?>
<div class="stm-single-feature">
<div class="heading-font"><?php echo $item['tab_title_single']; ?></div>
<?php $features = explode(',', $item['tab_title_labels']); ?>
<?php if (!empty($features)): ?>
<?php foreach ($features as $feature): ?>
<?php
$checked = '';
if (in_array($feature, $features_car)) {
$checked = 'checked';
};
?>
<div class="feature-single">
<label>
<input type="checkbox" value="<?php echo esc_attr($feature); ?>"
name="stm_car_features_labels[]" <?php echo $checked; ?>/>
<span><?php echo esc_attr($feature); ?></span>
</label>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php }
}?>
JavaScript
<script type="text/javascript">
jQuery(function($) {
$("#generateVin").on("click", function() {
var $checkbox = $("input[type=checkbox]").eq(1);
$checkbox.prop("checked", true);
$checkbox.parent().addClass("checked");
});
});
</script>
I have a "read more about supplier" displayed on each productarticle. When you click it, it's supposed to pop-up a small box with information about the supplier.
The code is working, but when you click the text it only toggles the productarticle on the top of the page. It looks like it can't seperate them and give them each a unique ID. I have no idea how to do this as I'm an amateur. Any help please?
HTML:
<div class="popup" onclick="myFunction1()" style="position:relative; left:
70px;">Read more about <?php echo $supplier ?> here
<span class="popuptext" id="myPopup">
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier1') !== false) { echo 'Supplier 1 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier2') !== false) { echo 'Supplier 2 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier3') !== false) { echo 'Supplier 3 description'; } ?></b>
</span>
</div>
js:
function myFunction1() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
the loop including all products:
<?php $hr='';?>
<div class="row">
<ul class="listProductItems clearfix">
<?php for ($art=0; $art<count($articles); $art++){ ?>
<?php $imagine =$this->site_model->show_thumbs($articles[$art]['LA_ART_ID']); ?>
<?php $supplier =(($articles[$art]['producer']!==NULL) ? $articles[$art]['producer'] : $articles[$art]['SUP_BRAND']); ?>
<?php //$criteria =$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php $criteria =$this->site_model->article_criteria_filter($articles[$art]['la_id']); ?>
<?php $criteria .=$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php if ($hr !== $articles[$art]['generic_name'].' PRODUCED BY '.$supplier){ ?>
<div class="clearfix"></div>
<?php $hr = $articles[$art]['generic_name'].' PRODUCED BY '.$supplier; ?>
<?php } ?>
<li class="clearfix">
<div class="span4" style="max-height:50px">
<?php if (isset($imagine)){ ?>
<div class="thumbnail"><?php echo $imagine; ?></div>
<?php } else { ?>
<div class="thumbnail"><a href="<?php echo site_url('type/'.$versiune.'/category/'.$tree.'/article/'.$articles[$art]['la_id']); ?>">
I currently working with voting system. Everytime a voter selects a candidate the javascript should work but nothing happens. Here is my code.
<?php while ($row = $stmt->fetch()) { ?>
<div class="form-group">
<div class="row">
<label class="control-label col-md-3 col-md-push-1" id="labelpad" for="username"><?php echo $row['position']; ?></label>
<div class="col-md-6 col-md-push-0"><br>
<?php
$stmt1 = $con->prepare("SELECT * FROM candidate WHERE position = ?");
$stmt1->bindParam(1, $row['position']);
$stmt1->execute();
while ($row1 = $stmt1->fetch())
{
?>
<label>
<input id="" class="uniform_on" name="selector[]" type="checkbox" value="<?php echo $row1['candidate_id'];?>">
</label>
<?php echo "<label>".$row1['name']."</label>"; ?><br>
<script>
$(".uniform_on").change(function(){
var max= <?php $row1['vote_limit'];?>
if( $(".uniform_on:checked").length == max {
$(".uniform_on").attr('disabled', 'disabled');
alert('5 Items allowed per borrow');
$(".uniform_on:checked").removeAttr('disabled');
}else{
$(".uniform_on").removeAttr('disabled');
}
})
</script>
<?php } ?>
</div>
</div>
I'm working on a wordpress site http://taste.fourseasons.com/ingredients/
At the bottom of the main content section, there's an option to call more posts, but once they are called, the script that allows users to vote on them is not enabled on the new posts. If the vote up button is clicked, the user is brought to the top of the page as if it has an <"a href="#">
I assume that the voting script is getting initiated on load, and but not triggering the voting button on posts that are loaded after the original document is loaded?
Any thoughts?
thanks!
Okay, so here's what I think is the relative code. I tried to set up a jsfiddle, but I think it's all still alittle over my head at the moment. From what I have gathered, I need to create a call back function so that once the new posts are added to the DOM, the original voting script gets reloaded. Hope that makes sense and thanks for taking the time with an aspiring scriptor!
From function.php:
add_action("wp_ajax_add_votes_options", "add_votes_options");
add_action("wp_ajax_nopriv_add_votes_options", "add_votes_options");
function add_votes_options() {
$postid = $_POST['postid'];
$ip = $_POST['ip'];
if (!wp_verify_nonce($_POST['nonce'], 'voting_nonce_'.$postid))
return;
$voter_ips = get_post_meta($postid, "voter_ips", true);
if(!empty($voter_ips) && in_array($ip, $voter_ips)) {
echo "null";
die(0);
} else {
$voter_ips[] = $ip;
update_post_meta($postid, "voter_ips", $voter_ips);
}
$current_votes = get_post_meta($postid, "votes", true);
$new_votes = intval($current_votes) + 1;
update_post_meta($postid, "votes", $new_votes);
$return = $new_votes>1 ? $new_votes : $new_votes;
echo $return;
die(0);
}
And here's how it's being pulled into onto the page:
<div class="grid_row_1">
<div class="grid_col">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
<div class="grid_row_1">
<div class="grid_col ingredients post-holder" data-direction="DESC" data-
order="date">
<?php $count = 0; ?>
<?php if (have_posts()) : ?>
<?php query_posts('posts_per_page=15&post_type=ingredient&paged='.$paged);
while ( have_posts() ) : the_post(); ?>
<?php
foreach($ingredient_images as $meta_box) {
$data = get_post_meta($post->ID, 'ingredient-images', true);
switch($meta_box['name']){
case 'ingredient_thumb': $feature_thumb = $data[ $meta_box[ 'name' ]
]; break;
case 'ingredient_status': $feature_thumb_show = $data[ $meta_box[
'name' ] ]; break;
}
}
switch($feature_thumb_show){
case 1: $type='suggested'; break;
case 2: $type='accepted'; break;
case 3: $type='featured'; break;
}
$theDate= get_the_date( 'o-n-j' );
$time = strtotime($theDate);
$one_week_ago = strtotime('-1 week');
switch($count){
case 0: echo '<div class="post one-quarter-sub-col-above-480 one-half-sub-col-at-480 first '.$type.'">'; $count++; break;
case 1: echo '<div class="post one-quarter-sub-col-above-480 one-half-sub-col-at-480 last-at-480 '.$type.'">'; $count++; break;
case 2: echo '<div class="post one-quarter-sub-col-above-480 one-half-sub-col-at-480 first-at-480 '.$type.'">'; $count++; break;
case 3: echo '<div class="post one-quarter-sub-col-above-480 one-half-sub-col-at-480 last '.$type.'">'; $count = 0; break;
}
$votes = get_post_meta($post->ID, "votes", true);
$votes = !empty($votes) ? $votes : "0";
$hasvoted = $_COOKIE['better_votes_'.$post->ID];
$hasvoted = explode(",", $hasvoted);
if(in_array($post->ID, $hasvoted)) {
$vtext = "VOTED";
$class = 'unvote-sm';
} else {
$ip = $_SERVER['REMOTE_ADDR'];
$voter_ips = get_post_meta($post->ID, "voter_ips", true);
if(!empty($voter_ips) && in_array($ip, $voter_ips)) {
$vtext = "VOTED";
$class = 'unvote-sm';
} else {
$vtext = "VOTE";
$class = 'vote-sm';
}
}
?>
<?php if(function_exists('wp_nonce_field')) wp_nonce_field('voting_nonce_'.$post->ID.'', 'voting_nonce_'.$post->ID.''); ?>
<div class="bg-white pad-lr10 pad-t10 border-lightgrey margin-b10">
<div class="photo-wrapper ratio-16-9 text-white">
<?php if($feature_thumb_show!=3): ?>
<img src="<?php bloginfo('template_directory'); ?>/images/blank_landscape.gif">
<div class="image-overlay full-width full-height align-center bg-lightblue">
<table class="layout-vert-center full-width full-height">
<tr><td><a class="header font-30 tk3 leading-tight" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></td></tr>
</table>
</div>
<?php else: ?>
<img src="<?php bloginfo('template_directory'); ?>/includes/timthumb.php?src=<?php echo $feature_thumb; ?>&w=220&h=130&a=t">
<div class="image-overlay bottom bg-black bg-opaque-50 pad-5">
<a class="header font-30 tk3 leading-tight" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
<?php endif; ?>
<?php if( $time > $one_week_ago ) {?>
<div class="image-overlay"><img src="<?php bloginfo('template_directory'); ?>/images/icon_new.png"></div>
<?php } ?>
</div>
<div class="clear"></div>
<div class="font-16 leading-medium">
<div class="one-half">
<a href="#" class="vote icon-text-link disp-block border-right-lightgrey pad-tb5 pad-r5 tk3" data-post="<?php echo $post->ID ?>">
<div class="vote-text pad-t5 float-left"><?php echo $vtext; ?></div>
<div class="float-right">
<div class="vote-count float-left text-medgrey pad-t5"><?php echo $votes; ?></div>
<span class="icon-holder float-left <?php echo $class; ?>"></span>
</div>
<div class="clear"></div>
</a>
</div>
<div class="one-half">
<a href="#" class="icon-text-link disp-block pad-tb5 pad-l5 tk3">
<div class="pad-t5 float-left hide-at-768">COMMENT</div>
<div class="float-right"><div class="float-left text-medgrey pad-t5"></div><span class="icon-holder comment-sm float-left pad-t5"><?php comments_number( '0', '1', '%' ); ?></span></div>
<div class="clear"></div>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<?php endwhile;?>
<?php wp_reset_query(); ?>
<?php endif; ?>
Then the new posts get added with:
<div class="grid_row_1">
<div class="grid_col">
<div class="border-top-black margin-tb20">
<div class="align-center"><a class="action-btn pad-lr50 tk3 view-more" href="#">SHOW MORE</a></div>
</div>
</div>
</div>
Thanks again for any insight!