Creating separate links using ID classes? - javascript

This Wordpress template I'm working with has a section where it places six icons which display tooltips when hovered over. I need them to become links to different pages but I only really know CSS and basic HTML as I'm primarily a designer.
I've found the appropriate PHP file and managed to insert a link to Google as a placeholder but it makes them all link to there. I'm guessing from the code that it's using PHP to 'ask' for which icon to insert and then getting them from elsewhere, Jquery maybe? I barely even know what Jquery is.
Anyway, here's the code:
You can see where I've added the <a href="http://www.google.com"> for the
<span class="feature-icon feature">
<i class="<?php echo $icon; ?>"></i>
</span>
Any idea how I can get them to link to separate URLs?

Editing this php file is not really good approach.
These six icons are editable on WP admin page as a custom post type. You need to extend this post type with a link option.

If we are talking about external link make this(but before doing anything BACK UP your code and database):
find:
"features" =>
array(
And add this code right above it:
"link" =>
array(
"label"=>__("Link",'Pixelentity Theme/Plugin'),
"type"=>"Text",
"default"=>""
),
But I am still just guessing without whole template, so try it and let me know the result

Related

How would I dynamically clone a site and apply custom css to it?

So my school has a "portal"; a site with heaps of resources for the students and teachers. Only downside is that it is really, really badly designed and runs on HTML4. I have some decent web design skills and I want to try and improve it. I have asked if I could directly edit it and I was very quickly shut down. So how would I go about cloning the site while applying custom CSS?
While doing an iframe seems like a great idea to start with, it is quickly stopped by CORS. You can't apply custom CSS to an iframe with an origin of a different domain.
I could just download the site's source code and write custom CSS for that, but that way it won't update when new content is updated.
I am happy to play around with django/flask if needed since I have a lot of experience with python and if it works, I can create a downloadable app using react or something.
Anyone got any ideas?
Just go to the website you want to clone
Right click
Inspect element
Copy the whole html code
Paste it to you code editor
Add a tag a <style>
Enter Css to customize it with respect to the tags of the html code
You are done!!!
Happy coding :)
If I wanted to clone someone else's terribly built website, I would use PHP and DOM parsing.
https://codingreflections.com/php-parse-html/
In a perfect world, their code will follow some kind of pattern and, using the DOM parser, you'd be able to pick out their navigation and internal href links, and rewrite them to point to your site like http://terriblewebsite.com/aboutus.phtml => http://imborrowingyourwebsite.com?page=http://terriblewebsite.com/aboutus.phtml.
I would write all my css in a single file, remove their <link tags and insert my own css file links -- but use their classes as much as possible.
Your index.php file would basically be (this is a rough sketch)
<?php
$url = "http://terriblewebsite.com";
if ($_GET['url']) $url = urldecode($_GET['url']);
$dom = new DomDocument();
# $dom->loadHTML($url);
// change nav
$nav = $dom->getElementById('navbar'); //DOMElement
$nav_links = $nav->getElementsByTagName('a'); //DOMNodeList
foreach($nav_links as $item) {
$item->setAttribute('href', 'http://imborrowingyourwebsite.com?page='.$item->getAttribute('href'));
}
// ... other transformations...
// finally
echo $dom->saveHTML();
?>

Popup Window on PHP Table

Hello everyone I am a newbie and a student and there is a code in PHP that I want to have on my PHP.
So what I want is if I click the URL it should popup a new window. I know how to do it in a button but I have no idea how to do it using echo.
PS: THIS IS THE CODE I WANT TO REPLACE
echo"<td><a href=update.php?primary=".$row['ID']."'>Update</a>";
PS: Please correct me / Teach me.
PS: I am now able to open it in a new window but the problem is I am not able to get the primary.
Here is my code: echo"<a href=update.php target=popup onclick=window.open('update.php','popup','width=500,height=500');return false;?primary=".$row['ID'].">Update ";
Please do research before asking a question.
Ether way, I suggest over all you'd visit a site called W3Schools, its very basic, but provides with pretty useful stuff.
In this case you need to add the attribute "target", to _blank If I am not mistaken. You can read about what kind of target attribute options you can do hare: https://www.w3schools.com/tags/att_a_target.asp
Since you are a new contributor, I suggest looking trough that site at minimal before going with a post.
Added the solution with explanation.
echo"<td><a href=update.php?primary=".$row['ID']."'>Update</a>";
Change it to:
echo"<td><a target='_blank' href='update.php?primary=".$row['ID']."'>Update</a>";
By the way, you forgotten to add a qoute on your href attribute, this might've been causing some problems.
The target is a "<a>" tag attribute, its just html, echo from PHP side just acts as a renderer from php files. So whatever you put in your echo will render with HTML. Its important to add <head> and <html> tags so it would render like a full HTML document, just having php tags. It is wise to separate these things to make a proper framework A.K.A - using template system and leaving PHP parts to be only calculations from endpoint (Server side). I'd advise you to learn some sort of framework like Symfony based frameworks (Laravel for example). It will be a bigger hustle to learn, but you would learn it the right way and would know way more about these things from that.
echo"<td><a target=_blank href='update.php?primary="'.$row['ID'].'"'>Update</a>";
target=_blank is what you want to open a new window from a link href.

Google Analytics for Individual WordPress Pages [duplicate]

I'm trying to get Google Analytics Code to work on the thank-you page after customer has filled in the contact form and I've tried putting it in the thank-you page which is in the pages under admin in Wordpress backend using HTML tab but it seems to generate unnecessary p and br tags in between codes especially before closing tag. I'm not sure whether that is causing the issue or not.
Is there a way we can do this for just one page?
I'm not 100 % sure whether it's possible at all to insert javascript with the tinyMCE Editor of Wordpress.
If that's true, then you can try the following:
Get the posts' ID: Look at the linking in your admin menu when you are in the view where you can see all your posts, e.g.
http://www.your-url.com/wp-admin/post.php?post=796&action=edit
796 would be your ID here.
Enter the following in your header.php of your wordpress theme (to find at /wp-content/themes/theme-name):
.
<?php if (is_page(796)) { ?>
//YOUR ANALYTICS CODE IN HERE
<?php } ?>
Replace 796 with your ID here, and put your analytics code in between the PHP code.
It sounds like you're trying to add it using the "Visual" view, which formats whatever you put in into paragraphs, etc.
Try switching to "HTML" view (the tab is at the top right of the input box) and add it there - hopefully that should allow you to add it without converting it!
Edit: As per my comments below, I made a mistake - it seems even the HTML tab adds some degree of formatting.
In this case, you may find some use with this plugin:
http://wordpress.org/extend/plugins/raw-html/
This allows you to displable to auto formatting on a per-post basis. So on that specific page you could turn off the autoformatting simply to allow you to add that Analytics snippet.
The only other way I can think off offhand would be to write a custom page_template just for that thankyou page and add it to there. Instructions are here: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

JSP/Javascript: How to dynamically change a header based on the page im on

I have a header.jsp file that is included in all my pages on the website what acts as a template for all my header content (e.g site titles, logos, home links etc.). Inside this header.jsp I want to set up a page title in a h1 tag (for example) that would change to show the title of whatever page I am on when navigating through the pages of the website.
My initial thought was to use javascript to achieve this however based on the tutorials, most people are using frameworks like angular which I dont really want to resort to using unless there was no alternative. Is there any way I can change my headers to pick up whatever page I am on using raw JavaScript? Or, is there anything in jsp that can also make this possible? If so how can I achieve this?
How about setting the page title as a request attribute page_title and then fetching it in your header.jsp.
Thank you for the responses. I have managed to figure out one alternative that has worked for me though I wouldnt say it is the most graceful. (Any suggestions to improve this and I will update my answer for better understanding!) Also worth noting the solution was using jsp NOT javascript.
What I have done is within my header.jsp, I had set up in the body the following code between a div tag:
<%= subTitle %>
From there, I then applied the following code to all other pages on my website:
<% String subTitle="Example Page"; %>
'Example page' being the name of the webpage that I want to show on my header but it can be different on any page and had given me the expected results.
The only thing is however that in doing it this way, when it is set on Eclipse Luna I get a problem where 'subTitle cannot be resolved to a variable'. The code in itself works but it is problems like these that I would also rather resolve in order to provide the best solution. Any suggestions to remove this error would be appreciated.

What is the best way to change 'views' with Javascript?

For example, I have profile page and select with 'About', 'Photos', 'Videos' section etc., and I don't want to refresh page each time I change section, I want just to change the content of container with Javascript. Sure it wouldn't be handy to write markup of pages in Javascript file, and my idea would be to write div's of each view and display only one of them:
<div id="about>About content</div>
<div id="photos" style="display: none;">Photos content</div>
However, I think there are better ways to do it, because I don't like keeping hidden views on the page. Also in most cases content in views should be generated by script, so it's looks like job for a template engine, but I'm not sure there are such in Javascript.
So what would be the best way to implement this in Javascript. I hope my idea is clear. Thanks in advance!
Try use mustache it is a template engine for javascript.
Also, you can use AngularJS templates (dynamically loaded into page on demand)
It is very easy to use. (However contains other things you might not want.. but should want ;) )
Use jQuery to fetch for the views whenever the user clicks on a link.
For example, bind the click event:
$('#clickToSeePhotos').click(function(){
$('#photosContainer').load('pathTo/photos.html');
});
$('#clickToSeeAbout').click(function(){
$('#aboutContainer').load('pathTo/about.html');
});
Here is the html:
<a id="clickToSeePhotos" href="#">Photos<a/>
<div id="photosContainer"></div>
<a id="clickToSeeAbout" href="#">About<a/>
<div id="aboutContainer"></div>
Here is a link to jQuery's page where they provide more info and examples for load
http://api.jquery.com/load/
You may download the jQuery library and use it on your server. However, as #Cybrix suggests you can also point to the library hosted by Google. See this link. At the end this could improve performance for your users.

Categories

Resources