I've a post with a video, contained inside the content. So, the content of my post is like:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam quam sed imperdiet viverra. In ornare semper nisl, ac sodales metus facilisis ac. Morbi quis erat id magna dapibus consequat. Vestibulum sollicitudin hendrerit nisl sit amet lacinia. Mauris sed sodales quam. Mauris semper, ante quis imperdiet iaculis, neque eros pulvinar eros, id aliquet magna mauris at sapien. Sed sodales, diam venenatis aliquam ornare, nisl lorem accumsan eros, vitae suscipit dolor purus quis odio. Integer quis hendrerit sapien, at pretium neque. Nullam convallis auctor enim et malesuada. Suspendisse id fermentum risus..
[video width="100%" height="360" url="http://www.youtube.com/watch?v=sd1273xA"]"
Where the shortcode is displayed like text... I need to display the video...to use do_shortcode.
I'm trying without luck:
function your_prefix_detect_shortcode()
{
global $post;
$pattern = get_shortcode_regex();
if ( preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
&& array_key_exists( 2, $matches )
&& in_array( 'video', $matches[2] ) )
{
echo do_shortcode("[$matches[0][0]]");
}
}
add_action( 'wp', 'your_prefix_detect_shortcode' );
EDIT:
The content is called from single.php like:
<p class="titulillos">Descripción: <br><span><?php echo nl2br($post->post_content); ?></span></p>
EDIT2:
I'm having problems with encoding...because when processing the shortcode, for example, height isn't 360px, it's "360"
And the result is a fatal error doing calcs
Related
Im trying to make a simple tooltip element in a textarea. The idea is, that the tooltip should show what is selected. My code so far is:
import React, { useRef, useState } from 'react';
const Contact = () => {
const myref = useRef();
const [tooltip, setTooltip] = useState('');
const handleMouseUp = (e) => {
if (window.getSelection().toString() !== '') {
myref.current.style.display = "inline-block";
myref.current.style.background = "black";
myref.current.style.color = "white";
setTooltip(window.getSelection().toString());
myref.current.style.top = e.clientY + "px";
myref.current.style.left = e.clientX + "px";
}
}
return (
<div className="contact">
<h2>Contact</h2>
<textarea
rows="10" cols="100"
onMouseUp={handleMouseUp}
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vestibulum odio. Morbi porttitor, ante fermentum condimentum porta, elit tellus blandit lorem, eu porttitor turpis lectus sed urna. Morbi semper, velit luctus finibus aliquam, orci orci commodo velit, ut ultrices ligula ex id nulla. Quisque enim leo, mollis a consectetur quis, vestibulum id eros. Integer non vehicula ligula. Nulla eu quam consectetur, elementum felis rutrum, lobortis dolor. Mauris laoreet egestas orci, at posuere odio sagittis sagittis. Sed consequat urna turpis, ut tincidunt nunc posuere sit amet. In dui leo, euismod et tempus sed, sodales vitae nisi. Nam faucibus aliquet condimentum. Curabitur scelerisque, quam in dignissim mattis, erat felis ultrices metus, et sagittis purus magna quis magna."
/>
<div ref={myref} style={{ display: 'none', position: 'absolute' }}>{tooltip}</div>
</div >
)
}
export default Contact;
But I cant make the tooltip position just under the selected text. Any ideas?
getBoundingClientRect seem to do the trick.
import React, { useRef, useState } from 'react';
const Contact = () => {
const myref = useRef();
const myref2 = useRef();
const [tooltip, setTooltip] = useState('');
const handleMouseUp = (e) => {
console.log(e.current);
if (window.getSelection().toString() !== '') {
myref.current.style.display = "inline-block";
myref.current.style.background = "black";
myref.current.style.color = "white";
setTooltip(window.getSelection().toString());
myref.current.style.left = (e.clientX - myref2.current.getBoundingClientRect().left) + "px";
myref.current.style.top = (e.clientY - myref2.current.getBoundingClientRect().top) + "px";
}
}
return (
<div className="contact" ref={myref2}>
<h2>Contact</h2>
<textarea
rows="10" cols="100"
// onMouseUp={handleMouseUp}
onChange={() => { }}
onMouseUp={handleMouseUp}
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vestibulum odio. Morbi porttitor, ante fermentum condimentum porta, elit tellus blandit lorem, eu porttitor turpis lectus sed urna. Morbi semper, velit luctus finibus aliquam, orci orci commodo velit, ut ultrices ligula ex id nulla. Quisque enim leo, mollis a consectetur quis, vestibulum id eros. Integer non vehicula ligula. Nulla eu quam consectetur, elementum felis rutrum, lobortis dolor. Mauris laoreet egestas orci, at posuere odio sagittis sagittis. Sed consequat urna turpis, ut tincidunt nunc posuere sit amet. In dui leo, euismod et tempus sed, sodales vitae nisi. Nam faucibus aliquet condimentum. Curabitur scelerisque, quam in dignissim mattis, erat felis ultrices metus, et sagittis purus magna quis magna."
/>
<div ref={myref} style={{ display: 'none', position: 'absolute' }}>{tooltip}</div>
</div >
)
}
export default Contact;
Trying to implement a simple show more button with react using useState hook. Everything is working fine except that when the content is toggled on the vertical scroll position jumps down the size of the div that was shown. In other words, the content that is shown is positioned above the "Show More" button instead of extending the text and keeping the scroll position at the beginning of the text. I have searched everything and everywhere but was unable to find an elegant solution without remembering and restoring scroll positions. Here is a sample code that shows my problem.
import {useState} from "react"
export default function Test() {
let text = (
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet porttitor vulputate. Morbi pellentesque blandit est vel
dictum. Fusce mattis dolor in diam tempor commodo. Integer eu consequat magna. Cras placerat magna vitae nunc auctor, quis
sodales ex hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis dapibus condimentum elementum.
Phasellus ultrices quis quam vel dignissim. Suspendisse ac sapien iaculis, suscipit nunc vel, commodo lorem. Vestibulum a arcu
ut mi commodo ullamcorper. Vestibulum massa nunc, sodales a diam et, condimentum finibus quam. Nulla aliquet lacus id rhoncus
maximus. Phasellus sed vehicula erat, eget suscipit ipsum. Donec nulla arcu, luctus nec mattis eu, cursus sit amet libero.
Nullam at egestas orci. Sed tempus convallis enim vitae rutrum. Sed mattis vel dolor eu laoreet. Nam a aliquet massa, eu
vulputate lacus. Fusce condimentum, eros in scelerisque dictum, turpis nisl sagittis diam, auctor blandit massa nunc eget purus.
Praesent vitae ultrices risus. Vivamus sed leo ipsum. Maecenas rhoncus, urna sit amet interdum maximus, risus odio ullamcorper
aug
</p>
)
const [show, setShow] = useState(false)
return (
<>
<div style={{height: 1000, backgroundColor: "red"}}></div>
<button onClick={() => setShow(!show)}>THIS IS HOW I WANT IT TO WORK</button>
<div style={{width: "20%"}}>{show ? text : "Not showing anything"}</div>
<button onClick={() => setShow(!show)}>BUT ON THIS BUTTON THAT IS BELOW TEXT</button>
<div style={{height: 1000, backgroundColor: "blue"}}></div>
</>
)
}
Runnable code snippet:
function Test() {
let text = (
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet porttitor vulputate. Morbi pellentesque blandit est vel
dictum. Fusce mattis dolor in diam tempor commodo. Integer eu consequat magna. Cras placerat magna vitae nunc auctor, quis
sodales ex hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis dapibus condimentum elementum.
Phasellus ultrices quis quam vel dignissim. Suspendisse ac sapien iaculis, suscipit nunc vel, commodo lorem. Vestibulum a arcu
ut mi commodo ullamcorper. Vestibulum massa nunc, sodales a diam et, condimentum finibus quam. Nulla aliquet lacus id rhoncus
maximus. Phasellus sed vehicula erat, eget suscipit ipsum. Donec nulla arcu, luctus nec mattis eu, cursus sit amet libero.
Nullam at egestas orci. Sed tempus convallis enim vitae rutrum. Sed mattis vel dolor eu laoreet. Nam a aliquet massa, eu
vulputate lacus. Fusce condimentum, eros in scelerisque dictum, turpis nisl sagittis diam, auctor blandit massa nunc eget purus.
Praesent vitae ultrices risus. Vivamus sed leo ipsum. Maecenas rhoncus, urna sit amet interdum maximus, risus odio ullamcorper
aug
</p>
)
const [show, setShow] = React.useState(false)
return (
<div>
<div style={{height: 1000, backgroundColor: "red"}}></div>
<button onClick={() => setShow(!show)}>THIS IS HOW I WANT IT TO WORK</button>
<div style={{width: "20%"}}>{show ? text : "Not showing anything"}</div>
<button onClick={() => setShow(!show)}>BUT ON THIS BUTTON THAT IS BELOW TEXT</button>
<div style={{height: 1000, backgroundColor: "blue"}}></div>
</div>
)
}
ReactDOM.render(<Test/>, document.getElementById("test"));
<body>
<div id="test"></div>
<!-- React.js CDN links -->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<!-- Babel (essential for JSX syntax - https://babeljs.io/docs/en/#jsx-and-react) -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
I have solved it! In Chrome CSS property overflow-anchor is auto by default which in turn makes the clicked button a scroll anchor. So when the new content is loaded the window scrolls with the anchor.
In order to fix this behavior you can set overflow-anchor: none; globally or to the button itself.
function Test() {
let text = (
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet porttitor vulputate. Morbi pellentesque blandit est vel
dictum. Fusce mattis dolor in diam tempor commodo. Integer eu consequat magna. Cras placerat magna vitae nunc auctor, quis
sodales ex hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis dapibus condimentum elementum.
Phasellus ultrices quis quam vel dignissim. Suspendisse ac sapien iaculis, suscipit nunc vel, commodo lorem. Vestibulum a arcu
ut mi commodo ullamcorper. Vestibulum massa nunc, sodales a diam et, condimentum finibus quam. Nulla aliquet lacus id rhoncus
maximus. Phasellus sed vehicula erat, eget suscipit ipsum. Donec nulla arcu, luctus nec mattis eu, cursus sit amet libero.
Nullam at egestas orci. Sed tempus convallis enim vitae rutrum. Sed mattis vel dolor eu laoreet. Nam a aliquet massa, eu
vulputate lacus. Fusce condimentum, eros in scelerisque dictum, turpis nisl sagittis diam, auctor blandit massa nunc eget purus.
Praesent vitae ultrices risus. Vivamus sed leo ipsum. Maecenas rhoncus, urna sit amet interdum maximus, risus odio ullamcorper
aug
</p>
)
const [show, setShow] = React.useState(false)
return (
<div>
<div style={{height: 1000, backgroundColor: "red"}}></div>
<button onClick={() => setShow(!show)}>THIS IS HOW I WANT IT TO WORK</button>
<div style={{width: "20%"}}>{show ? text : "Not showing anything"}</div>
<button onClick={() => setShow(!show)}>BUT ON THIS BUTTON THAT IS BELOW TEXT</button>
<div style={{height: 1000, backgroundColor: "blue"}}></div>
</div>
)
}
ReactDOM.render(<Test/>, document.getElementById("test"));
body {
overflow-anchor: none;
}
<body>
<div id="test"></div>
<!-- React.js CDN links -->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<!-- Babel (essential for JSX syntax - https://babeljs.io/docs/en/#jsx-and-react) -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
I have a mixin to change the background colour based on a percentage that will change sequentially. What I'm trying to do is set it up so on the even items get a background color.
I can't figure out the :nth child sequence. using :odd wasn't working.
Here is my current mixin:
#mixin colorContainers-sections($startcolor) {
$loop_color : $startcolor;
#for $i from 0 through 5 {
// start colour at base
#if $i > 1 {
$loop_color : lighten($loop_color, 5%);
}
section:nth-child(2n+#{$i}) {
background-color : $loop_color;
}
}
}
And i'm calling it like this:
body {
&.pageTheme-blue {
#include colorContainers-sections($blue);
}
}
And here is an example of the HTML
<section>
<div class='container'>
<div class='row'>
<div class='col-xs-12'>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel imperdiet magna. Morbi molestie at quam a accumsan. Morbi libero metus, dictum vitae massa eget, finibus maximus mauris. Integer libero erat, consequat a ex vitae, suscipit ultricies lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis diam at efficitur sollicitudin. Sed eleifend ligula egestas orci eleifend convallis. Vestibulum id enim nisi. Nam tempor felis id sem mattis, ac commodo dui malesuada. Praesent quis molestie velit. Aliquam cursus dui quis auctor dapibus. Suspendisse iaculis quis ex ac aliquet. Curabitur varius rutrum mauris at iaculis. Ut molestie mi placerat tempus faucibus. Nam aliquet interdum velit nec malesuada.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut urna augue, imperdiet a felis sed, sagittis dapibus dolor. Sed ut est ac augue tempor lobortis sit amet ut risus. Donec justo risus, ornare a justo et, posuere euismod mi. Vestibulum nec.</p>
</div>
</div>
</div>
</section>
<section>
<div class='container'>
<div class='row'>
<div class='col-xs-12'>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel imperdiet magna. Morbi molestie at quam a accumsan. Morbi libero metus, dictum vitae massa eget, finibus maximus mauris. Integer libero erat, consequat a ex vitae, suscipit ultricies lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis diam at efficitur sollicitudin. Sed eleifend ligula egestas orci eleifend convallis. Vestibulum id enim nisi. Nam tempor felis id sem mattis, ac commodo dui malesuada. Praesent quis molestie velit. Aliquam cursus dui quis auctor dapibus. Suspendisse iaculis quis ex ac aliquet. Curabitur varius rutrum mauris at iaculis. Ut molestie mi placerat tempus faucibus. Nam aliquet interdum velit nec malesuada.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut urna augue, imperdiet a felis sed, sagittis dapibus dolor. Sed ut est ac augue tempor lobortis sit amet ut risus. Donec justo risus, ornare a justo et, posuere euismod mi. Vestibulum nec.</p>
</div>
</div>
</div>
</section>
<section>
<div class='container'>
<div class='row'>
<div class='col-xs-12'>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel imperdiet magna. Morbi molestie at quam a accumsan. Morbi libero metus, dictum vitae massa eget, finibus maximus mauris. Integer libero erat, consequat a ex vitae, suscipit ultricies lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis diam at efficitur sollicitudin. Sed eleifend ligula egestas orci eleifend convallis. Vestibulum id enim nisi. Nam tempor felis id sem mattis, ac commodo dui malesuada. Praesent quis molestie velit. Aliquam cursus dui quis auctor dapibus. Suspendisse iaculis quis ex ac aliquet. Curabitur varius rutrum mauris at iaculis. Ut molestie mi placerat tempus faucibus. Nam aliquet interdum velit nec malesuada.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut urna augue, imperdiet a felis sed, sagittis dapibus dolor. Sed ut est ac augue tempor lobortis sit amet ut risus. Donec justo risus, ornare a justo et, posuere euismod mi. Vestibulum nec.</p>
</div>
</div>
</div>
</section>
If I understand correctly, you try to give every second <section> element a different and previously generated background-color. Basically, this would do the job:
section:nth-child(#{$i*2}) {
background-color : $loop_color;
}
However, the above will target every even number only up to the 10th child, as your loop goes from 0 to 5. In case you have more than ten <section> elements and you want to have this lightning up background-color effect to repeat, you can use the following logic:
#for $i from 1 through 6 {
...
section:nth-child(12n - #{12 - ($i * 2)}) {
background-color : $loop_color;
}
}
How it works
You have six different colors and only every second child should get one of them. So the first color in the color palette must be applied to the 2nd, 14th, 26th, ... element, the second color must be applied to the 4th, 16th, 28th, ... element and so on:
c1 c2 c3 c4 c5 c6 // c = color
2 4 6 8 10 12
14 16 18 20 22 24
26 28 30 32 34 36
...
Now all you have to understand is, how nth-child works. For example:
How about the :nth-child(2n+1)?
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
Demo
section:nth-child(12n - 10) {
background-color: #00f;
}
section:nth-child(12n - 8) {
background-color: #1a1aff;
}
section:nth-child(12n - 6) {
background-color: #3333ff;
}
section:nth-child(12n - 4) {
background-color: #4d4dff;
}
section:nth-child(12n - 2) {
background-color: #6666ff;
}
section:nth-child(12n - 0) {
background-color: #8080ff;
}
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
<section>13</section>
<section>14</section>
<section>15</section>
<section>16</section>
<section>17</section>
<section>18</section>
<section>19</section>
<section>20</section>
<section>21</section>
<section>22</section>
<section>23</section>
<section>24</section>
I have a long page of content. Within this content is a div. When this div scrolls by, I'd like text to appear... as if the div is a window and you are seeing the text outside. The text remains fixed as the div scrolls by. Take a look at this fiddle: http://jsfiddle.net/bcu5fab7/6/
body{
height: 1000px;
}
div{
position: relative;
}
#text-container {
position: relative;
height: 300px;
/*width: 400px;*/
background: cyan;
overflow: hidden;
width:100%;
}
#text-container .boxtext {position:fixed; top:25%; overflow:hidden; padding:0 30px;}
<div style="">
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
<div id='text-container'>
<div class="boxtext">
<p>Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. </p>
</div>
</div>
<div style=""> <p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
As you can see, the text in the .boxtext div has position:fixed. But it appears on TOP of the other content. Is there a way around this problem? A way to hide the text except when the blue div scrolls by?
If you want a pure CSS implementation, you can use negative z-index's:
body{
height: 1000px;
}
div{
position: relative;
background:white;/*Covers the text, or you can see it through*/
}
#text-container {
position: relative;
height: 300px;
/*width: 400px;*/
background: cyan;
overflow: hidden;
width:100%;
z-index:-2;/*Places it behind everything*/
}
#text-container .boxtext {
position:fixed;
top:25%;
overflow:hidden;
padding:0 30px;
z-index:-1;/*places it behind everything except cyan div*/
background:transparent;
}
<div style="">
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
<div id='text-container'>
<div class="boxtext">
<p>Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. </p>
</div>
</div>
<div style=""> <p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
Otherwise, you have to use JS. I made a short jQuery plug-in for this once:
http://dev.debonairstudios.com/fromTop/
Only the first example works, I should really update the documentation :D
i am making one slider tab, i know have tons of plugins for that but i don't want to use plugins. so i want to show my category post title and post like bellow html formate but i can't. i tried my but my way only content loop not title. if can able to make html like bellow then tabs will work. guys how can i do that.
<ul class="tabs">
<li>Tabs 1</li>
<li>Tabs 2</li>
<li>Tabs 3</li>
<li>Tabs 4</li>
<li>Tabs 5</li>
</ul>
so here under li (tabs) put post title
<div id="content_1" class="tab_view first_tab">
<h2>Tab #1</h2>
<p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
</div>
<div id="content_1" class="tab_view first_tab">
<h2>Horizontal Tab #1</h2>
<p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
</div>
<div id="content_1" class="tab_view first_tab">
<h2>Horizontal Tab #1</h2>
<p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
</div>
<div id="content_1" class="tab_view first_tab">
<h2>Horizontal Tab #1</h2>
<p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
</div><div id="content_1" class="tab_view first_tab">
<h2>Horizontal Tab #1</h2>
<p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
</div>
see closely href="#content_1" rel="tab_1" this #content_ (1,2,3,4,5)should auto. similar <div id="content_1" this content_ also number will auto i mean post number
You can try this
$args = array(
'post_type' => array('post'),
'orderby' => 'post_date',
'category_name'=>'my category name' ,
'showposts' => 5 );
$array= get_posts($args); ?>
<ul class="tabs">
for ($i = 0; $i < count($array); $i++) { ?>
<li><a href="#content_<?php echo $i+1; ?>" rel="tab_<?php echo $i+1; ?>" class="tab">Tabs
<?php echo $i+1; ?></a></li>
<?php
$divs.='<div id="content_'.($i+1).'" class="tab_view first_tab">
<h2>'.$array[$i]->post_title.'</h2>
<p>'.$array[$i]->post_content.'</p>
</div>';
} ?>
</ul>
<?php $divs; ?>