I am developing GoldenStateLiquidation.com but have developed plenty of bugs in trying to put many projects together to form something beautiful. I put skrollr.js and skrollr.min.js inside js folder, called that in the header
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/skrollr.js"></script>
and my HTML looks like:
<section id="slide-3" class="homeSlide">
<div class="bcg" data-top="background-position: 50% 0px;" data-center="background-position: 50% 100px;" data-anchor-target="#slide-3">
<div class="hsContainer">
<div class="hsContent" data-center="bottom: 200px; opacity: 1" data-top="bottom: 0; opacity: 0" data-anchor-target="#slide-3 h2"></div>
<?php if ( is_home() ) { ?>
<?php if( get_option( 'hathor' )){ ?>
<div class="row">
<div id="slider">
<?php get_template_part( ''.$slides=o f_get_option( 'slider_select', 'nivo'). ''); ?>
<?php }else{ ?>
<?php get_template_part( 'dummy/dummy', 'nivo'); ?>
<?php } ?>
</div>
<?php }?>
</div>
</div>
This is me trying to implement parallax Skrollr with the already-given Hathor theme nivo.slider.
I have many other bugs maybe you can help me out.
You have to implement srkollr.js at the end of your html, just before closing body-tag.
just use following code...
<script src="js/skrollr.js"></script>
<script type="text/javascript">
window.onload = function() {
skrollr.init({
forceHeight: false
});
}
</script>
Related
I have two jQuery document.ready functions, one is for a pop-up, the other is for a cookie notification banner.
The problem I am encountering is when I load these separately whichever one I load second stops the first from working.
For example:
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#bookdirectlink").click(function() {
jQuery("#bookdirectp").show();
});
jQuery(".close").click(function() {
jQuery("#bookdirectp").hide();
});
}
);
</script>
<script type="text/javascript">
jQuery(document).ready(
function() {
$('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
});
</script>
The second script then works and hides the cookie bar when the button is clicked, but the first script doesn't work. The reverse is true if I swap the scripts around.
I've also tried combining the two into one ready statement, ie:
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#bookdirectlink").click(function() {
jQuery("#bookdirectp").show();
});
jQuery(".close").click(function() {
jQuery("#bookdirectp").hide();
});
$('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
}
);
</script>
But then none of the functions work.
The cookie bar runs from a script that I am loading in the header:
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>
Any advice would be greatly appreciated.
This is the html for the cookie banner:
<div class="cookie-message">
<p>We use cookies, including those by third parties, to improve our services, show you advertisements based on your preferences, perform statistical analysis on our users' browsing behaviour and simplify the interaction with social networks. If you continue browsing, we will assume that you agree with their use.</p><p> You can obtain further information here. Privacy Policy</p> <a class="my-close-button" href>Accept</a>
</div>
And the html for the pop up:
<div id="directcontainer">
<a class="close" href="#">X</a>
<?php if(get_field('heading', 'option')){ ?><h2><?php the_field('heading', 'option'); ?></h2> <?php } ?>
<?php if(get_field('main_text', 'option')){ ?><p><?php the_field('main_text', 'option'); ?></p> <?php } ?>
<?php if(get_field('small_text', 'option')){ ?><p><span><?php the_field('small_text', 'option'); ?></span></p> <?php } ?>
<?php if(get_field('booking_button_link', 'option')){ ?><?php if(get_field('booking_button_text', 'option')){ ?><?php the_field('booking_button_text', 'option'); ?> <?php } ?><?php } ?>
</div>
Stupid mistake:
I had
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>
instead of:
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"></script>
codeigniter-external java scriptfile not working?
in my view file:
<script src="<?php echo base_url();?>js/getquestion.js" type="text/javascript"></script>
<a onclick="getQuestion()" style="width: 280px; height: 540px; padding-top: 3px;" class="btn btn-primary" id="HyperLink">Start</a>
getquestion.js:
function getquestion() {
$.get("http://localhost/n/saq/saq/index.php/quizs/getquestion", function (resp) {
if (resp != null) {
$("#question").html(resp);
$("#loading").html("");
}
})
}
when i click start button not showing any thing,
but when i navigate to url http://localhost/n/saq/saq/index.php/quizs/getquestion its working. pls help me
Which folder you put your .js at?
Usually .js files are take places in assets/js folder, so you'll need:
<script src="<?php echo base_url(); ?>assets/js/getquestion.js" type="text/javascript"></script>
Or you can ... (more neat)
<script src="<?php echo base_url('assets/js/getquestion.js'); ?>" type="text/javascript"></script>
Just for information considering this is 2017 already
HTML5 don't need us to include the type attribute in <script> tag
PHP echo have a shorthand, instead of <?php echo base_url(); ?>, you just need <?= base_url() ?>
So you may write just like this:
<script src="<?= base_url() ?>assets/js/getquestion.js"></script>
... and you must include <!DOCTYPE html> in the first line of your pages
try this code,
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="<?php echo base_url();?>js/getquestion.js" type="text/javascript"></script>
<a onclick="getquestion()" style="width: 280px; height: 540px; padding-top: 3px;" class="btn btn-primary" id="HyperLink">Start</a>
<p id="question"></p>
</body>
js code,
function getquestion() {
$.get(<?php echo base_url("index.php/getquestions"),function(result){
if(result != null) {
//alert(result);
document.getElementById("question").innerHTML=result;
}
});
}
I have tested this code in http://jsfiddle.net/gLpHY/92/, in there it runs fine but when I run it in my computer it does not work. (I have tested two versions of this code once using just html and jquery and the next time I use them with php, both of them did not work for me.)
<html>
<head>
<link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
<link rel="stylesheet" href="<?php echo base_url()?>css/tableCss.css">
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery-1.12.0.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/projs.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery.validate.min.js"></script>
<title>Questions</title>
</head>
<body>
<div class="frm"><?php $a=array("id"=>"myForm","name"=>"myForm");
echo form_open('site/search',$a); ?>
<div>
<?php echo form_label('Question:','question'); ?>
<?php echo form_input('question', set_value('question', #$_GET['question']), 'id="question"', 'name="question"'); ?>
</div>
<div>
<?php echo form_label('Category:','category'); ?>
<?php echo form_dropdown('category', $category_options, set_value('category', #$_GET['category']), 'id="category"', 'name="category"'); ?>
</div>
<div>
<?php echo form_label('Score:','score'); ?>
<?php echo form_dropdown('score_comparison', array('gt' => '>', 'gte' =>'>=' , 'eq' => '=', 'lt' => '<', 'lte' => '<='), set_value('score_comparison', #$_GET['score_comparison']), 'id="score_comparison"', 'name="score_comparison"'); ?>
<?php echo form_input('score', set_value('score', #$_GET['score']), 'id="score"', 'name="score"'; ?>
</div>
<div>
<?php echo form_submit('action','');?>
</div>
<?php echo form_close();?>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myForm").validate({
rules: {
question: {
required: true
}
},
messages: {
question:{
required: "Please enter some text"
}
}
});
});
</script>
</body>
</html>
First off all, replace you <?php echo base_url()?> with just /. You can use relative path for resources from your site. Path should be like this: scr="/js/jquery-1.12.0.js" for all you scripts.
For second replace your string $().ready(function () { with $(function () {
Hope this helps.
Try typing in the full URL instead of using <?php echo base_url()?> as I have seen that cause problems with printing the URL twice and then the page obviously not being able to find it. Also, the way you have written .ready() is not recommended. You might want to consider adding document inside the parenthesis like this:
$(document).ready(function(){});
.ready() source
I want to add a simple light box plugin for my images gallery. Images are being fetched in a template called gallery-template like this
<?php
$args=array('post_type' => 'gallery');
$query= new WP_Query($args);
while ($query-> have_posts() ) : $query->the_post()?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h1 class="product_txt"><?php the_title();?></h1>
<a href=''><?php the_post_thumbnail( 'full', array( 'class' => 'product_img') );?></a>
</div>
<?php
endwhile;
?>
I've seen many plugins but they ask to add images to pages instead of getting them from a template, so how can I make it work like this?
You can do this without plugin. Use any lightbox you want. My example is with prettyphoto.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<?php
$args=array('post_type' => 'gallery');
$query= new WP_Query($args);
while ($query-> have_posts() ) : $query->the_post()?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<?php // Get image url
$attachment = wp_get_attachment_image_src( get_post_thumbnail_id($query->ID), 'full' );
$url = $attachment['0']; ?>
<h1 class="product_txt"><?php the_title();?></h1>
<a rel='prettyPhoto' href='<?php echo $url; ?>'><?php the_post_thumbnail( 'full', array( 'class' => 'product_img') );?></a>
</div>
<?php
endwhile;
?>
So I have the AJAX on my website working, a live example can be found here: www.mathewhood.com.
What I was curious about though was how to change my url when clicked from http://mathewhood.com/#http://mathewhood.com/sitefiles/2011/08/hello-w
to something more like http://www.mathewhood.com/sitefiles/#hello-w or something along that nature. Preferably without the /sitefiles/ as that is mainly a security thing.
I will post my code below, if anyone has experience with href defining and knows how wordpress works with it your help would be greatly appreciated!!!!
ajax.js
$(document).ready(function() {
// Check for hash value in URL
var href = $('.recentPost a').each(function(){
var hash = window.location.hash.substr(1);
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#.recentPost a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#theContainer').remove();
$('#theContainer').append('<span id="load">LOADING...</span>');
$('#theContainer').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#theContainer').fadeOut('normal');
}
return false;
});
});
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/ajax.js"></script>
<script>
$(document).ready(function() {
//move the image in pixel
var move = 8;
//zoom percentage, 1.2 =120%
var zoom = 1;
//On mouse over those thumbnail
$('.recentPost').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.recentPost').width() * zoom;
height = $('.recentPost').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>
<script>
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
</script>
<?php wp_head();?>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="headerWrap">
<div id="logo"></div>
<div id="nav"></div>
</div>
page_home.php
<?php
/*
Template Name: Home
*/
?>
<?php get_header();?>
<div id="contentWrap">
<div id="content"></div>
<div id="newBanner"></div>
<?php query_posts('category_name=portfolio&showposts=12'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="recentPost">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('204, 144', array('class' => 'thumbs')); ?>
</a>
<a href="<?php the_permalink();?>">
<div class="caption">
<div class="captionTitle"><?php the_title(); ?></div>
<p><?php the_content();?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<div class="cleared"></div>
</div>
<?php get_footer();?>
single_portfolio.php
<?php
/*
Template Name: Single Portfolio
*/
?>
<?php get_header();?>
<div id="contentWrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="content">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer();?>
Is this the code you need?
window.location.url = "http://mathewhood.com/sitefiles/2011/08";
window.location.hash = "hello-w";
.. or am I missing something.
It's not exactly clear what you are trying to do. Why are you posting so much of your code?