I have this simple contact form set up and, since I don't have the development time at this moment, I set this one up using jQuery verification instead of AJAX. This works fine.
But now I would like to have the page scroll down when there are errors in the form. I've downloaded jquery.scrollTo.js and added it to my header.php file. And I have the following script for the scrollTo:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
Now the weird thing is, when the #front_page_contactformulier span has class error it scrolls past this element (like literally to the bottom of the page).
If I change the script to another element:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_005',4000);
}
It works?
I cant for the life of me find out why this is happening? Here is my full code:
HTML
<section id="fp_content_006">
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<article>
<?php if( get_field('koptekst_6') ): ?>
<h2><?php the_field('koptekst_6'); ?></h2>
<div style="display:block;height:2px;width:30px;background:#f60;margin-left:auto;margin-right:auto;margin-bottom:15px;margin-top:15px;"></div>
<?php endif; ?>
<?php if( get_field('content_koptekst_6') ): ?>
<?php the_field('content_koptekst_6'); ?>
<?php endif; ?>
</article>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div id="front_page_contactformulier">
<span class="error">Error</span>
</div>
</div>
</div>
</div>
</section>
CSS:
#fp_content_006 {
position:relative;
margin-bottom:90px;
text-align:center;
margin-top:90px;
}
jQuery:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
Here is a fiddle, and the super weird thing is, it works here.
Check if your jquery.scrollTo.js is included properly in header.php file and remember this from PHP documentation:
Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP. It is a very common error to read code with include, or require, functions, or another file access function, and have spaces or empty lines that are output before header() is called. The same problem exists when using a single PHP/HTML file.
You can find documentation HERE
According to the JS you posted, let me break it down for you
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
The first argument should be the Jquery Object and you just need to wrap your selector with jquery object like this:
$('body').scrollTo($('#fp_content_006'),4000);
As per documentation provided here, you have plenty other ways to scroll instead of selector.
You can find the demo here
Also would like to mention, 4000 is the duration of animation which seems to be pretty high, i would recommend it to be 300 to 800.
Related
I'm starting with an example because I do not know exactly how it is named.
Let's consider an HTML item code from a shop.
<div class="item">
<div class="item-title">{$title}</div>
<div class="item-price">{$price}</div>
<div class="item-description">{$description}</div>
</div>
I'm using PHP, JavaScript, and HTML in my projects, and now I'm generating the HTML template, adding PHP code in my file like below:
$MySQL //request;
$Array // data from database
while($rowArray = mysqli_fetch_assoc($Array)){
<div class="item">
<div class="item-title"><?php echo $title ?></div>
<div class="item-price"><?php echo $price ?></div>
<div class="item-description"><?php echo $description ?></div>
</div>
};
This is not the best solution because I have algorithms on each page, and are difficult to manage. There is an option to use the HTML as a template (not created in the javascript as a new element) and insert it in my main page using javascript and fielding also the terms with JavaScript?
I'm sorry if my request isn't clear, I'm learning on my own and I'm 100% sure there is on internet tons of information about this, but considering that I do not know how it is named, I could not find it.
Have a great day.
I am quite new to creating websites with WordPress so I might ask a question which is quite straightforward but I could not find any suitable tutorials/answers to guide me.
I want to create dynamic text elements which I can edit within Wordpress. I have created a full website in HTML, CSS, and Javascript and I converted it to Wordpress pages.
Let's have a look for example to my about page:
about.php
<?php
get_header();
// Template Name: About
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<h2>Titel example</h2>
<p>A very long text.....</p>
<p>Another very long text</p>
Contact <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
</div>
</div>
<?php
get_footer();
?>
Now I want to be able to edit the title (<h2>) and text (<p>) and hyperlink (<a>) text in Wordpress. So that I can change the title etc.
I tried to use Advance custom fields by calling: the_field() or by using a shortcode but the text did not show up on my page.
So my question is: is Advanced custom fields the best way to do this because I can not make it work and are there other ways of achieving editing text within Wordpress.
For pages just use the WordPress loop: https://codex.wordpress.org/The_Loop
<?php
get_header();
if(have_posts()):
while(have_posts()): the_post();
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
endif;
get_footer();
?>
You create a page "About" in the backend in "Pages" and here you go. All contents within the_content(); are created by the WYSIWYG editor of the page.
Custom fields are for adding any custom or specific information to a post or page.
Most probably you do not need an extra template file for your about page and you can use a page.php file for all pages.
You can conditionally include data depending on custom fields and/or the page you are on.
Read more about custom fields here:
https://codex.wordpress.org/Custom_Fields
... and about conditional tags here:
https://codex.wordpress.org/Conditional_Tags
It will help you understanding it.
I have been struggling with this common social networking feature for quite some time. What I am trying to do is to expand the div to display comments, I'm sure you know what I am talking about.
Each post a user sends is automatically echo'd with an anchor link Comments. As mentioned, when this link is clicked, it will simply expand the div displaying all comments assigned to that thought_id.
Even if there are no comments assigned to the post, I still want the div to expand to display a text field so any user can post a comment, preferably echo this:
<?php
<form action='' method='post' enctype='multipart/form-data'>
<table style='width:850px;'>
<tr>
<td><textarea name='msg' rows='2' maxlength='255' cols='80' placeholder=' add your comment...'></textarea></td>
<td><input type='submit' name='send' value='Share'/> </td>
</tr>
</table>
</form>
?>
Here is what I have so far:
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
And here is where the comments anchor link is found. Since it is quite lengthy, I have reduced the echo's content to only the relevant code:
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
Other Infomation:
$thought_id is the id of the though the user posts. (table user_thoughts, column id).
I have another table called user_comments, which stores all comments and links it to the thought it is assigned to by post_id.
At the moment, nothing happens when I click comments.
First, here is a working example of what you want to achieve based on your code.
I had to strip the php part off because jsfiddle doesn't interpret it, so next is your code including the PHP bit.
I assumed that you have jQuery loaded as you added the jquery tag to the question.
It's complicated to know why what you tried doesn't work because we're missing important bit such as: how do you load your content into the DOM? dynamically or not (ajax?)
HTML/PHP
<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
<a href="#" class="toggle-comment" data-id="<?=$thought_id?>" style='padding-left: 5px;'> Comments (<?=$num_of_comments?>) </a>
</div>
<div id='toggleComment<?=$thought_id?>' class='new_comment' style='display:none;'>
<br/> <?=$comment_posted_by?> said: <?=$comment_body?>
</div>
</div>
</div>
Your link was missing an href attribute, which is mandatory for it to be displayed properly. So we set it to the commonly used "#" which means blank anchor. We will then need to catch the click event on this link and prevent its default action so we don't see that ugly # in our url
You should avoid storing big chunks of html in a php var and then echo it but use html templates instead.
You should avoid mixing PHP and javascript like this line in your code that assign a php var into a js one var id = <?php echo $thought_id; ?>;
Instead, You can store your thought_ids as a data attribute of your links and easily fetch them using jQuery's data() later.
Javascript
$(function() {
$("a.toggle-comment").on("click", function(event) {
// prevents browser to go to href's #
event.preventDefault();
// uses Jquery's data() function to get comment id from link's data-id attribute
var id = $(this).data('id');
// get element by id and toggle display
var ele = document.getElementById("toggleComment" + id);
$(ele).toggle();
});
});
Here I got rid of your toggle() function and replaced it with a handler function using jQuery's on() that get called each time we click on a link that has the toggle-comment CSS class. It has the advantage of working on dynamically added content after the page is loaded. jQuery's on() documentation page does a great job explaining this (and the deprecated live() page too)
Notice that you will need to add this toggle-comment class to every of your Comments (X) links
If you are new to jQuery, you should consider reading this page to understand what the first line does and why you need it. (referring to enclosing your code into $(function() {...});)
event.preventDefault(); tells the browser to not perform its default behaviour when clicking on the link (which is go to that link and would append # to the address bar)
$(this).data('id'); reads put the clicked link (this) into a jQuery object and use data() to get the value of its data-id attribute, which is set to $thought_id
CSS issue update
See my updated fiddle for your CSS issue, I removed the float inline styles and positioned div.mini_nav using absolute positioning relative to message_wrapper.
I think that this issue is not related to the original question and should be asked in another one.
PHP Code as per OP's
<?php
$thought_id = 1;
$num_of_comments = 10;
$comment_posted_by = "Me";
$comment_body = "test comment body";
//hard coded above vars to achieve assumptions
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a href='' onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
?>
JavaScript
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
return false;
}
</script>
The above code worked for me, as per single record.
Now as you have tagged your question under jQuery
you could simply use
$(".message_wrapper .mini_nav a[href!='']").click(function() {
$(this).parent().next().toggle();
});
You could simply use the <details> HTML tag which acts as a disclosure triangle.
<details>
<summary>View comments</summary>
<ul>
<li>You comments</li>
<li>You comments</li>
<li>You comments</li>
</ul>
</details>
https://developer.mozilla.org/en/docs/Web/HTML/Element/details
The only issue is that it is not supported by the lovely IE browsers.
If I understand your question correctly , this is what you are looking for
https://jsfiddle.net/vrqsz3ev/7/
<div class='message_wrapper'>
<div class="main-msg-container">
<div class='where_msg_displayed'>
<input type="hidden" id="msg-id" value="1">
<div class='more_options'>
MESSAGE1
</div>
<div class='mini_nav'>
<button class="open-comment">comments</button>
</div>
</div>
<div class="hide-mess-details">
<div class='where_details_displayed'>
<div id='toggleComment1'class='new_comment msg-id-1'>
sachin said: Hii guysss (cmt of msg 1)
</div>
<form action='' class="comment-form"method='post' enctype='multipart/form-data'>
<textarea name='msg' placeholder=' add your comment...'></textarea>
<input type='submit' name='send' value='Share'/>
</form>
</div>
</div>
</div>
I made it using jQuery
Some of the things to note while looking into the code is
Uses the concept of flexbox in css3 to style it.
if you click on the share button only the comment of the respective message gets updated . For checking I added a message id along with the form when comment button is clicked .for checking purpose I added an alert (message id of the respective messages) if you click the share button
Now you can add your messages under .where_msg_displayed using php
display all the comments under .where_details_displayed (if you want to , you can add details under there respective messages -little edit is needed)
If you are continuing with this code , with little edits you can achieve the above requirements .
One page checkout was working properly about a week ago and now its not. I am no doubt at fault, because I was still having an issue related to the admin backend, and I probably fouled this up somehow in the process of working on that.
In any case, what happens is that when a (logged in, registered) user clicks on the "Continue" button in the Billing Information step of the one page checkout, its as if the button was not clicked. It doesn't proceed to the next step. And the error console (in Firefox) reports "TypeError: checkout is undefined", and it shows line 303 in opcheckout.js.
This problem is very similar to another one posted on SO but (a) that one isn't really answered and (b) I don't have a high enough score to comment (or add to to the question there).
While a solution would be wonderful, I am also really trying to learn how to debug this myself. I have already applied many magento solutions that I've found by googling (for other problems) and, though they work and that's the main thing, I am starting to want to be able to solve my own problems. And maybe even be able to help others eventually...
So, in this case, given that "checkout in undefined", how might I find where it should get defined?
In my case, the /skin/frontend/base/default/js/opcheckout.js file did not match the one in /skin/frontend/[yourpackage]/[yourtheme]/js/opcheckout.js as pspahn suggested. The .js file in my theme was completely blank. Copying the contents over fixed everything up. Commenting here for visibility for others who might be searching.
The solution here was to
Correct two bad class references in onepage.phtml, and
Rename some css classes to match what the stock magento checkout code wants.
The specific css classes needed were:
step-title
step
number
Here is an excerpt of the corrected onepage.html file:
<ol id="checkoutSteps" class="one-page-checkout">`<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
<li id="opc-<?php echo $_stepId ?>" class="section <?php echo !empty($_stepInfo['allow'])?'allow':'' ?> <?php echo !empty($_stepInfo['complete'])?'saved':'' ?>">
<div class="step-title">
<h3><span class="step-count"><?php echo $i ?></span> <?php echo $_stepInfo['label'] ?></h3><?php echo $this->__('Edit') ?>
</div>
<div id="checkout-step-<?php echo $_stepId ?>" class="step <?php if($_stepId=='shipping_method'): ?>-no-padding<?php endif; ?> a-item" style="display:none;">
<?php echo $this->getChildHtml($_stepId) ?>
</div>
</li>
<?php endforeach ?>
</ol>
And here is an example of copying one of my existing css classes to one of the new required ones (from the file boxes.css):
.one-page-checkout .box { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
.one-page-checkout .step { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
I had called this "box", but it needs to be "step" as far as Magento is concerned. Since your css classes are likely to have been different, you will need to copy
I hope this helps someone.
By the way, here is how I figured this out:
Observe problem with my theme
Test with stock theme: confirm that works
Go back to my theme, and disable files selectively to figure out which ones make a difference,
Narrowed it down to one file: onepage.phtml, examine it carefully, compare to stock
Found css class names that my theme didn't have
Add them, debug
This is long and tedious, but it seems to work.
So I can't find myself an answer or explanation for a problem / question I have.
What I want to achieve is pretty complicated. For illustrating, here's a JSFiddle - http://jsfiddle.net/GXaeL/3/
Could someone explain me, is this even possible to show the content of first row posts in one div below them. Same thing for the second row of posts etc.
I myself have had in mind that:
To combine somehow Tabs and Accordions?
This is purely an CSS positioning problem?
This is far more complicated than just accordions and CSS?
Since now, I have a PHP code, that creates a grid of posts. .posts are floated left and the row cleared when it hits 3.
<div class="post">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/fallback_image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</a>
</div>
<?php
if($c == $bpr) :
?>
<div class="clr"></div>
<?php
$c = 0;
endif;
?>
<?php
$c++;
endwhile;
?>
<div class="clr"></div>
May-be someone can push me to the right path on this?
I'm not exactly sure what your preferred implementation would be, so I'll offer a couple options.
The first option is similar to you put together on jsFiddle, except I wrapped the "trigger" <div> tags in a <div> of their own and added a "content" <div> tag to the single "content" <div> tag that you were sliding down and up... easier explained in code:
<div id="row1" class="item-info">
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
<div class="item">item-4</div>
</div>
<div id="contentRow1" class="item-info" style="display:none;">
<div class="item-content">content div for item-1</div>
<div class="item-content">content div for item-2</div>
<div class="item-content">content div for item-3</div>
<div class="item-content">content div for item-4</div>
</div>
For this solution, the jQuery code you were using wouldn't need to change.
The second option is a bit more complex, but it allows each answer to be displayed individually rather than having to be displayed with all the other answers in the row.
Admittedly, there may be a more elegant, or jQuery UI-focused solution, but that's fine... I'll learn from that, too.
For now, I'll offer the details of Option 2 on jsFiddle, which I forked from what you offered in your question.
Let me know if you have questions, and I hope this helps.