I am trying to create a second hidden page within my post which will be shown on specific parameters.
Here is the code I am using in singe.php
<!-- Default Dynamic Section -->
<div id="default-content" class="dynamic-content">
<?php the_content(); ?>
</div>
<!-- Dynamic Section 1 -->
<div id="downloadlinks" class="dynamic-content">
<?php the_title(); ?>
</div>
content of section 1 is just for an example.
this is javascript jquery code,
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('download');
$(document).ready(function() {
// Check if the URL parameter is apples
if (dynamicContent == 'links') {
$('#downloadlinks').show();
}
// Check if the URL parmeter is empty or not defined, display default content
else {
$('#default-content').show();
}
});
</script>
I need to know, do I am going well. Is there any good way to do that?
Related
As of now, I have tried doing this
In the contact form, under form tab I have added these lines-
<label>
[email* your-email default:get id:textarea placeholder "Email address"] </label>
<div style="text-align: center;">[submit id:button "Get started now"]</div>
in functions.php file I have added following lines
add_action( 'wp_footer', ’redirect_to_new page’);
function ’redirect_to_new page() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
If ( '2023' == event.detail.contactFormId ) {
location = 'https://app.techinme.com/#/registration?email=[your-email]’;
}
}, false );
</script>
<?PHP
}
when the user clicks on submit button on the form they are directed to the new page but I am unable to populate the email ID in the new form present in the new page. Can someone please guide me further?
Cheers!
This is not tested but should get you going in the right direction.... Below I updated your code to grab the email from the form and append it to the location url:
<?php
add_action( 'wp_footer', 'redirect_to_new_page');
function redirect_to_new_page() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '2023' == event.detail.contactFormId ) {
// get email
var email = event.detail.inputs.filter(function(item){
return item.name === 'your-email';
})[0].value;
location = 'https://app.techinme.com/#/registration?email=' + email;
}
}, false );
</script>
<?php
}
I am trying to show .gif banner on a posts only within specific category after first paragraph in wordpress, so I my code in loop-single.php looks like:
<?php if(in_category('my_category')){ ?>
<script>
const par = document.querySelector('p');
par.insertAdjacentHTML('afterend', '<div><img src="some_gif" alt="" class=""></div>')
</script>
<?php } ?>
But it doesn't work as expected. Anyone have an idea? Or may be some other solution that not recquires installing additional plugins (not that I don't want to, most of them just slow the site down).
Thank you
edit: 'after first paragraph' added
So, I found a way, firstly I needed to check if the post is in wanted category, than create a function and call it afterwards. The code is set in single-loop.php file in my template:
<?php if(in_category('my-category')){ ?>
<script type="text/javascript">
function krasAd() {
const par = document.querySelector("p");
par.insertAdjacentHTML('afterend', '<div><img src="my-gif" alt="" class=""></div>')
};
krasAd();
</script>
<?php } ?>
There was also one way to check if you have a string in URL that only recquires JS. But it recquires you to have properly created URL structure, for example: domain.com/category/post
If I had category in my posts URL I would use code below, the code is set before closing footer tag in my single-loop.php template file:
<script type="text/javascript">
if (window.location.href.indexOf("my-string") > -1) {
const par = document.querySelector("p");
par.insertAdjacentHTML('afterend', '<div><img src="my-gif" alt="" class=""></div>')
}
</script>
I am looking for an alternative solution to HTML Framesets and from what I have read so far, I can use DIVs with CSS to create column contents. Basically, I want my images in one column on the left and when clicked should call details.php (tagged as id=details) in the column on the right.
I have started off with the following; unfortunately, clicking links in the left column is not calling anything in the right column:
<div class="col1">
<a href="details.php?PersonID=<?php echo $PersonID; ?>" target=details> <?php echo $row['FamilyName']; ?> <?php echo $row['FirstName']; ?> </a>
</div>
<div class="col2" id="details">
<?php $file = file_get_contents('./details.php', true); ?>
</div>
I will appreciate any advise to make this work.
You can combine HTML & CSS with jQuery or any javascript libraries to load the content (details.php) asynchronously using AJAX.
$('a').on('click', function(e) {
var contentUrl = $(this).attr('href');
$('#details').load(contentUrl, function() {
console.log('the content has been loaded is appended into the div');
});
});
For more reference you can go to jQuery API - load.
Below is a page code of my custom plugin where I am trying to use jquery datetime picker.
The picker script was taken from this link. But due to some reason I am getting an Error message saying "jQuery("#calendar1, #calendar2").calendar is not a function". I have checked that the files required are included correctly and before the custom code. But still there is this error.
<?php
function list_my_styles() { // ADDING THE SCRIPTS
$plugin_url = WP_PLUGIN_URL.'/my_custom_datepicker/';
wp_register_style('my-addon-datepicker-css',$plugin_url.'jquery-calendar.css');
wp_enqueue_style('my-addon-datepicker-css');
wp_enqueue_script('jquery');
wp_register_script('calendar_plugin',$plugin_url.'jquery-calendar.js');
wp_enqueue_script('calendar_plugin');
}
add_action('wp_enqueue_scripts','list_my_styles');
function my_custom_datetime_script() { // ADDING THE JQUERY SCRIPT
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#calendar1, #calendar2").calendar();
jQuery("#calendar1_alert").click(function(){alert(popUpCal.parseDate(jQuery('#calendar1').val()))});
});
</script>
<?php
}
add_action('wp_head','my_custom_datetime_script');
function custom_datetime_picker_area() {
?>
<input type="text" id="calendar1" class="calendarFocus"/>
<input type="button" id="calendar1_alert" value="Alert datetime object"/>
<?php
}
add_shortcode('my_datepicker','custom_datetime_picker_area');
?>
Any Help will be appreciated
Thanks
This is what I use in my plugin:
/* add jquery ui datepicker and theme */
global $wp_scripts;
wp_enqueue_script('jquery-ui-datepicker');
$ui = $wp_scripts->query('jquery-ui-core');
$url = "https://ajax.aspnetcdn.com/ajax/jquery.ui/{$ui->ver}/themes/redmond/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-redmond', $url, false, $ui->ver);
The CDN I'm using has all of the available themes to choose from as well.
Then on my form page i use:
<label for="date_of" style="width: 135px !important;">Presentation Date
<?php echo '<img src="'.$this->pluginurl.'images/help.png"
title="Enter the Presentation date here." />';?>
</label>
<input type="text" id="date_of" name="date_of" value="" />
and in:
jQuery(document).ready(function() {
jQuery('#date_of').datepicker({
dateFormat: 'yy-mm-dd'
});
});
I load plugin.js file with register/enqueue_script which contains the document.ready function.
Hope this helps.
The error means it can not find this function , which in turns means either :
1 - it can not find the script , or
2 - you are trying to execute the script before it is loaded ..
One thing I did not understand - where is this code going in your plugin ??
Anyhow, first verify that you have a wp_head() and wp_head() action (template tags) in your THEME where you test the plugin, Then , also try to move the action to the footer ...
function my_custom_datetime_script() { // ADDING THE JQUERY SCRIPT
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#calendar1, #calendar2").calendar();
jQuery("#calendar1_alert").click(function(){alert(popUpCal.parseDate(jQuery('#calendar1').val()))});
});
</script>
<?php
}
add_action('wp_footer','my_custom_datetime_script');
I would like to pass information to an iframe via post. (Could be jquery or javascript that executes the post, it doesn't really matter).
The information cannot be sent via querystring as I do not have access to change the way the page brought in by the iframe is.
This data will determine the layout of the content in the iframe so how can I make it so that after the post is sent the iframe is updated? (possibly refresh?)
I wrote a blog post about doing this with jQuery to upload a file using a hidden iframe. Here's the code:
Here is the HTML for the form:
<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>
The DIV in which to allow jQuery to create the iframe you can hide it with a little CSS:
<div id="iframe" style="width:0px height:0px visibility:none">
</div>
The DIV in which to show the results of the callback:
<div id="textarea">
</div>
The jQuery code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#formsubmit").click(function() {
var userFile = $('form#userfile').val();
var max = $('form#max').val();
var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
$('div#iframe').append( iframe );
$('#theuploadform').attr( "action", "uploader.php" )
$('#theuploadform').attr( "method", "post" )
$('#theuploadform').attr( "userfile", userFile )
$('#theuploadform').attr( "MAX_FILE_SIZE", max )
$('#theuploadform').attr( "enctype", "multipart/form-data" )
$('#theuploadform').attr( "encoding", "multipart/form-data" )
$('#theuploadform').attr( "target", "postframe" )
$('#theuploadform').submit();
//need to get contents of the iframe
$("#postframe").load(
function(){
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("div#textarea").html(iframeContents);
}
);
return false;
});
});
</script>
I used a php app like this uploader.php to do something with the file:
<?php
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];
if ($maxfilesize > 5000000) {
//Halt!
echo "Upload error: File may be to large.<br/>";
exit();
}else{
// Let it go
}
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
print('File is valid, and was successfully uploaded. ');
} else {
echo "Upload error: File may be to large.<br/>";
}
chmod($uploadfile, 0744);
?>
There's more there than you need, but it illustrates the concept in jQuery.
I don't have the code handy but my team accomplished this purely in Javascript. As I recall it went something like this:
function postToPage() {
var iframe = document.getElementById('myIFrame');
if (iframe) {
var newForm = '<html><head></head><body><form...> <input type="hidden" name="..." value="..." /> </form><script type=\"text/javascript\">document.forms[0].submit();</scrip' + 't></body></html>';
iframe.document.write(newForm); //maybe wrong, find the iframe's document and write to it
}
}