I am trying to get some CSS containing PHP on jQuery.
I basically need this CSS:
background: #3c653c url( <?php echo $cta_background_image_url; ?> ) no-repeat fixed;
Applied to:
wp.customize( 'cta_background_image', function( value ) {
var styles = {
backgroundPosition : "center top",
backgroundBlendMode: "hard-light",
position: "relative",
height: "440px",
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
backgroundSize: "cover",
lineHeight: "200%",
color: "#fff",
overflow: "hidden",
paddingTop: "0",
marginBottom: "0"
};
value.bind( function( to ) {
$( '.cta-parallax-section ' ).css( 'background', 'url( ' + to + ')' );
$( '.cta-parallax-section ' ).css( styles );
} );
});
I need too inject the code where it says css( 'background', 'url( ' + to + ')' );
This code will be applied to a WordPress Customizer to make it render changes made by the user in real time within the preview window.
How can I achieve this? I can't find information online on this kind of maneuver.
Thanks in advance!
To get the value from the variable $cta_background_image_url; you can simply set a timeout and retrieve the value from the element, which you can use for whatever you want.
For example:
setTimeout(function() {
var data = $("background").css("background-image");
}, 50);
The variable data would output url( [ value from $cta_background_image_url ] ).
To inject it, simply use the variable data:
$( '.cta-parallax-section ' ).css( 'background', data );
You can put some vars in head with this code:
add_action('wp_head', function(){
?>
<script type='text/javascript'>
var bg_img = '<?php echo $bg_img; ?>';
</script>
<?php
});
And use bg_img var in your js code. But better way is using wp_localize_script function.
Related
Hi I need set value of PHP variable to "1" if clients screen resolution is more then 1200px (I check only width) and set value of this variable to "2" if client have screen smaller then 1200px.
To check clients width of screen I use JQuery function "$( window ).outerWidth(true)". If PHP can check clients resolution then I don´t need wrote this question, but PHP not allow this and for that I search for solution of this problem.
=> How can I write script which allow change PHP variable before client load page? I mean I need AJAX, but I don´t know how used it.
Sorry for this maybe simply question. Can someone help me?
This might help ,
var width = $(window).width();
var height = $(window).height();
var screenTimer = null;
function Screen (){
$(window).resize(function() {
height = $(window).height();
width = $(window).width();
getScreen ();
});
function getScreen (){
return { 'height' : getHeight (), 'width': getWidth () };
}
screenTimer = setInterval ( getScreen (), 50 );
}
function getHeight (){
console.log ( 'height: ' + height);
$('#height').text(height);
return height;
}
function getWidth (){
console.log ( 'width: ' + width);
$('#width').text(width);
return width;
}
Screen ();
put this code in php along with script tag and set your variable.
Impossible I get it... Finally a write this:
index.php:
<script type="text/javascript">
$(document).ready(function() {
var sirka_monitoru = $( window ).outerWidth();
if ( sirka_monitoru < 1200 ){
$.post("soubor1.php", { nejaka: "1111" }, function (msg)
{
$('.some_name').html(msg);
});
}
else{
$.post("soubor2.php", { nejaka: "2222" }, function (msg)
{
$('.some_name').html(msg);
});
}
}); //END $(document).ready()
</script>
<div class="some_name"></div>
soubor1.php (1st file to include) file soubor2.php is similar to soubr1.php
<?php
echo "Value: " . $_POST["nejaka"];
?>
<div style="width: 100%; float: left; background-color: green; height: 100px;">
soubor1
</div>
=> When I load page then check width of users screen and after that I can load different PHP files and send him some important variables to solved my problem from question.
=> I accept my answer and solved this queston and close it
Ok, Im trying to make a draggable CMS system, now Im stuck on the next problem.
When Im done dragging my 'div' I want to save my new left and top (x and y) variables in my MySQL database using PhP.
I get my left and top variables by the next line of codes:
$(function() {
$( "#3" ).draggable({
stop: function () {
$.post("upload.php", {
left: this.getBoundingClientRect().left,
top: this.getBoundingClientRect().top
})
},
containment: "#containment-wrapper",
scroll: false
});
my upload.php is:
<?
mysql_query("UPDATE nvt SET left='". $_POST['left'] ."'")or die(mysql_error());
mysql_query("UPDATE nvt SET top='". $_POST['top'] ."'")or die(mysql_error());
header("Location: inlogged");
?>
When I'm done dragging my div there is just no reaction?
I think you are missing }); at the end. The code should be :
$(function() {
$( "#3" ).draggable({
stop: function ( event, ui ) {
$.post("upload.php", {
left: parseInt( ui.offset.left ),
top: parseInt( ui.offset.top )
})
},
containment: "#containment-wrapper",
scroll: false
});
}); //see the change
I've been scratching my head for a few days on this now. I have a site running a jcarousellite slider on the home page. On another page of the site I want the side nav to be sticky (i.e. be position: relative; whilst scrolling until it reaches the top of the page and then position: fixed; thereafter).
I have the following code being called in:
//jQuery Functions
$(document).ready(function(){
//JCarouselLite
$(function() {
$("#mainSlider").jCarouselLite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible: 1,
auto: 6000,
speed: 1000
});
});
//Sticky Side Nav
var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
$("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
});
In its current format, the sticky sidenav code is working fine, but jcarousellite is not. If I remove the sticky sidenav code, then jcarousellite works fine.
I'm sure this is going to be something simple like a syntax error but I just cant seem to solve it.
Any help much appreciated.
Use $ as function parameter for document ready
//jQuery Functions
jQuery(document).ready(function($){
//JCarouselLite
$(function() {
$("#mainSlider").jCarouselLite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible: 1,
auto: 6000,
speed: 1000
});
});
//Sticky Side Nav
var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
$("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
});
I am using the jquery masonry on my website http://zakiyadavidson.com.
I am wanting to do a rollover effect such as what is on http://damiencorrell.com/. My end result would be when you rollover a picture text appears.
I attempted to add in the below js code:
//Set div dimensions equal to image's dimensions:
$('#image_holder1').width($('#image_1').width());
$('#image_holder1').height($('#image_1').height());
$('#image_1').each(function(){
//set css of right:
$(this).css({right: '-' + $(this).width() + 'px'})})
//tell the browser what to do when hovering on the div:
$('#image_holder1').hover(function() {
//when mouse hover:
$('#image_0').animate({
right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
},
function() {
//when mouse out, no hover:
$('#image_0').animate({
right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
});
Along with the above js code I added in the css block below:
#image_holder1 {
overflow: hidden;
}
.image1 {
position: absolute;
}
The masonry html looks like the below with the above added changes:
<div class="box photo col3" id="image_holder1">
<img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" />
<img id="image_1" src="image_17Hover.jpg" />
...
Rather than the images showing as you mouse over you are able to see it soon as you load the page. The masonry layout is now not aligned properly. Is it because I have the function under the onload event? Any assistance is greatly appreciated.
I figured it out!!!
A simple Jquery script does the trick and will allow you to do as many pictures as necessary!!
<script>
jQuery(function () {
$(".imgSwap img").hover(function () {
this.src = this.src.replace("_off", "_on");
}, function () {
this.src = this.src.replace("_on", "_off");
});
});
</script>
I hope this helps others of you.
You can check out the working script by going to my site http://zakiyadavidson.com
is there any jQuery plugin to create something like the live feed from the Twitter Main Page , using PHP, which is getting the data from a MySQL database?
How has to be the PHP file?
Thanks.
You really don't need a plugin for this, you could easily create something similar yourself using jQuery to make AJAX calls to a PHP MySQL feed
Create a script to make reoccurring AJAX calls using setTimeout() and then add the new found results to the feed container using .prepend()
HTML
<html>
<head><title>Tweets</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#tweets {
width: 500px;
font-family: Helvetica, Arial, sans-serif;
}
#tweets li {
background-color: #E5EECC;
margin: 2px;
list-style-type: none;
}
.author {
font-weight: bold
}
.date {
font-size: 10px;
}
</style>
<script>
jQuery(document).ready(function() {
setInterval("showNewTweets()", 1000);
});
function showNewTweets() {
$.getJSON("feed.php", null, function(data) {
if (data != null) {
$("#tweets").prepend($("<li><span class=\"author\">" + data.author + "</span> " + data.tweet + "<br /><span class=\"date\">" + data.date + "</span></li>").fadeIn("slow"));
}
});
}
</script>
</head>
<body>
<ul id="tweets"></ul>
</body>
</html>
PHP
<?php
echo json_encode(array( "author" => "someone",
"tweet" => "The time is: " . time(),
"date" => date('l jS \of F Y h:i:s A')));
?>
setInterval() would be more adequate, since you want a check at regular intervals.
Then, there is a jquery comet plugin that explores the implementation of the "push" technology. Check it out here.
var frequency = 5000, // number of milliseconds between updates.
updater = function() {
jQuery.ajax({
url: 'http://twitter.com/example/something.html',
success: function(data) {
// update your page based upon the value of data, e.g.:
jQuery('ul#feed').append('<li>' + data + '</li>');
}
});
},
interval = setInterval(updater, frequency);
<script>
$(document).ready(function(){
var frequency = 10000; // 10 seconds = 10000
var updater = function() {
$.ajax({
url: 'mesaj.html', // data source html php
cache: false,
success: function(data) {
$("#message").html(data); // div id
}
});
};
interval = setInterval(updater, frequency);
});
</script>
example
<div id="message">{ do not write }</div>