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.
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 have ACF set up to be called into a fancybox. It's pulling in the fields (because I can see the hardcoded header information) but nothing from the ACF. I've set the link to call an ID which is then assigned to the section I want to call when clicked.
I expect to click the image and open the fancy box with the ACF image and content displaying in the fancybox. What I get is header fields and no acf content.
I've tried removing the display none from the class.
I tried hard coding a basic a tag calling a p and that seemed to work, but when I put in the ACF information, it breaks.
I also removed all of the php and just hard coded in an image and content, and it works. It just doesn't like the php calling my ACF.
<a href="#popup" data-fancybox>
<img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
</a>
<section id="popup">
<img src="<?php the_field('project_image', get_the_ID()); ?>">
<h3>About</h3>
<p><?php echo $about_content;?></p>
<hr class="hr-left">
<h3>Features</h3>
<p><?php echo $features_content; ?></p>
<a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>
When the image is clicked, a fancy box will open and display the content within the "popup" div. What's happening is that it's opening the lightbox and populating with empty fields.
I was able to resolve this. I didn't have the information operating inside the loop. See solution below:
<?php while ($loop->have_posts()) : $loop->the_post();
$about_content = get_field('about_content');
$features_content = get_field('features_content');
$button_text = get_field('button_text');
?>
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.
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.
Firstly there are 101 questions similar to this one, however still unable to answer this question.
I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane.
My loop for displaying thumbnail images is as follows:
<?php function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
} ?>
<div id="thumb">
<img src="<?php echo getVimeoThumb($id);?>" alt="">
<h4><?php the_sub_field('child_title'); ?></h4>
</div>
My main feature video is displayed as follows:
<div id="feature">
<h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4>
<iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe>
</div> <!-- end of feature Container -->
The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript.
Questions
How can I swap just the ID and text between these two divs.
I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame.
Many thanks
On your thumb, you could put the id on a rel on your div so you can retrieve it easily via jQuery:
`<div id="thumb" rel="your_id">...</div>`
And a $('#thumb').attr('rel') to get it.
Then you can create a JavaScript function that gives you the full URL from the ID and update your iframe src via $('#feature iframe').attr('src','your_url')