Im building a wordpress site which has a custom Tiny MCE style added to it, it gives the user a pre styles 'More' button containing an anchor, that goes at the bottom left of the post. The more button is formatted like this
<p><span class="moreButton"><a>Link here </a></span></p>.
My problem is styling the boxes to be dynamic in size, regardless of how much text is inside them and because the more button style is being inputted through a wordpress post, it is contained in a div that I cant seem to free it from.
All in all it looks like this:
<div class="newsBoxMore">
<div class="newsBoxMainHolder">
<div class="alumniHeading newsMainHeading">
<h4>21 Years of NCCA Masters</h4>
</div>
<div class="alumniContent newsMainContent">
<p>As a reminder of where we started out this example from 1990 won a special award at the CG90 Festival.</p>
<p>Text in here.</p>
<p><span class="moreButton"><a title="Video" href="" target="_blank">View Here</a></span> </p>
</div><!-- end newsMainContent -->
<div class="newsDateHolder">
<p>POSTED: 16.06.13</p>
</div><!-- end newsDateHolder -->
</div><!-- end newsBoxMainHolder -->
</div><!-- end news Box More -->
What i am trying to do is move
<p><span class="moreButton"></span></p>
out of the newsMainContent div and i want it to sit under it, just above the newsDateHolder div. I have tried using the following code :
$(".newsMainContent span").insertAfter($(".newsMainContent"));
The problem with this is that it duplicate the moreButton class with every anchor thats on the page. so i end up with a post that should have one moreButton but it now has 10 because the page is showing 10 posts.
Any help will be greatly appreciated!!
You need to give the element you want it to be after a unique ID, and use that instead of the class.
Related
I have a class called event-manager in a wordpress php file in the plugins folder. They are using this class to style the elements, and I am using a custom css to over-write this. The problem is I cannot overwrite their css so I had to remove this class all-together.
I need to remove this class dynamically, removing manually every-time is pointless, because every-time the plugin gets updated the class comes back.
And here the html structure. The class appears on two different pages and on both pages the image alignment is different.
<!-- Home page -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-image"> <!-- this image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
<!-- Blog single -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-img"> <!-- and image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
To acheive this I used jquery .removeClass method.
$(function(){
$(".featured-img > div, .featured-image > div").removeClass("event-manager");
});
I also tried this
$(function(){
$(".featured-img > div").removeClass("event-image");
$(".featured-image > div").removeClass("event-image");
});
And this
var featuredimg = ['.featured-img > div','.featured-image > div'];
$(featuredimg.join()).removeClass('event-image');
On all these methods, the class seems to be removed, because its on two different pages, when I load the homepage.php for the first time, the class is removed but when I go to single.php, it did not remove automatically and when I refresh the page, the class removes. I am not sure why.
Can anyone help me.
Thanks.
In my opinions it is related with caching. Do you have any? If yes disable it to test if works without it. If no you can check on developer console if do you have any errors. Issue can be also with place the script like this (prefer at the end of the page).
I tried to add a CTA to a WordPress site. I placed on the header and I added this HTML code to the header.php
<!-- This is my extra div element-->
<div class="extra-top"> <?php echo ' <a class="extra-topie" href="tel:6172010333">Call Us Now: (617) 201-0333</a> '; ?></div>
<!-- Ends extra div element-->
But the Anchor text is not working: it's not clickable yet.
For me work... But why you insert PHP echo if not use no variable?
Try this:
<!-- This is my extra div element-->
<div class="extra-top"><a class="extra-topie" href="tel:6172010333">Call Us Now: (617) 201-0333</a></div>
<!-- Ends extra div element-->
This suppose to work both the PHP and Direct HTML if you place it the right place.
If it is still not clickable, that mean you have issue with associated Application to handle dialer in Windows.. try from mobile and it should show its working.
Just tried that on my WordPress, it didn't work in desktop because I don't have default phone dialer ..but worked from mobile.
Here;s the full header.php
http://collabedit.com/3au85
Here's the code that I added:
<!-- This is my extra div element-->
<div class="extra-top"><a class="extra-topie" href="tel:6172010333">Call Us Now: (617) 201-0333</a></div>
<!-- Ends extra div element-->
But the Anchor text is not working: it's not clickable yet. I mean its static and does nothing and it should show the tel: hyperlink .
Please share your thoughts!
Cheers
The <div id="page>" and <div id="pagecontent"> don't show in on my webpage. In Firebug, the "Script" tab shows that index.php has both of these divs in it, but the HTML tab doesn't show either div. Why?
All of the content is generated by PHP, and everything shows correctly on the page except for these two divs. Both divs are immediately after the <body> tag. The active website with this problem can be found here.
HTML document:
<?php include "topofpage.php" ?>
<!--Main Content Area-->
<div id="main">
<!-- TABLE HTML GOES HERE, BUT IT'S KINDA LONG AND BORING AND THE PROBLEM ISN'T HERE SO I TOOK IT OUT -->
<!--Copyright Notice-->
<p><br />
<div id="divdate">© 2009-2025 Poet Slam. All rights reserved.</div><br />
<script type="text/javascript">
var divisiondate=document.getElementById("divdate"); var newdater=new Date(); var years=newdater.getFullYear(); divisiondate.innerHTML="© 2013-"+years+" Poet Slam. All rights reserved.";
</script>
</div> <!-- THIS CLOSES THE <DIV ID="PAGECONTENT"> CREATED IN THE EXTERNAL PHP FILE
</div> <!--THIS CLOSES THE <DIV ID="PAGE"> CREATED IN THE EXTERNAL PHP FILE
</body>
</html>
it's a small thing, but looking at line 49 in the page source you have an unclosed comment
<!--CREATE A POEM * TAG DRAG AND DROP->
Running the page as it stands through the W3CValidator - http://validator.w3.org/ - shows that causes a few errors that might be throwing the DOM parser.
As a first step I'd suggest fixing that, and iterating through the validator to at least knock off the (unexpected) errors
I have a multi-page form which works on the principle of loading all of the pages inside the DOM under different DIV id's and as you progress through the form, it simply ads a style="display:none" to the Div's which should not be displayed.
I have a problem where two pages need to have the same content, however as i am using javacript and jquery, i am getting conflicts (as technically, both pages are loaded and the scripts are conflicting).
Can i get a php if Function to say - IF Div id gform_page_2_2 has style="display:none" load (block of html a), and IF Div id gform_page_2_3 has style="display:none" load (block of html b), otherwise load nothing.
How would i go bout doing this?
I'm not quite sure what exactly you are asking but since you have a way to determine when to apply style="display:none" you can use a boolean value display_none=true and use that in your if.
This is a sample code. Here, I have made use of jQuery here. I have included each page's content inside separate DIVs in my index page. Then displayed the content of the page upon clicking the menu in my navbar. I hope this will give you an idea. :)
JScript:
<script type="text/javascript">
$('.nav_button').click(function (){
var page = $(this).text().toLowerCase();
$('#content').html($('#'+page+'_page').html()); //display content of div(that holds the content of the respective page) in the "conetent" div
$('html, body').animate({scrollTop: $("#navbar").offset().top}, 'slow'); //scroll back to the top
return false;
});
</script>
HTML:
<!-- Navigation menu -->
<div id="navbar">
<a class="nav_button" href="#">Home</a>
<a class="nav_button" href="#">About</a>
<a class="nav_button" href="#">Contact</a>
</div>
<div id="content">
<!-- Here page content will be displayed -->
</div>
<!-- This div holds the contents of each page -->
<div style="display:none;">
<!-- Contact Page -->
<div id="contact_page">
You can contact me through this email....
</div>
<!-- About Page -->
<div id="about_page">
About me? I love coding...
</div>
<!-- Home Page -->
<div id="home_page">
Yo! You are at my home page. Check out my whole site and enjoy :)
</div>
</div>
I hope this will help :)
If you want to see it in action, goto: www.magcojennus.co.cc (it's a site that I have created for my college day :) )