Hide an element loaded from external url via widget - javascript

I'm setting up a website for my brother in-law. Been using a few services that are pretty inescapable in his industry. I could vent right now about them -- but I won't.
I'd like to remove the "Powered by" logo that appears on the schedule and the links:
This is a link to the site: http://goo.gl/lHv7dF (using a shortener in case I have to remove it for some reason).
I had found this question previously asked on stack-flow in regards to the same conundrum. It has some dead links, and sort of comes in the middle, and relates to code found on a defunct webpage. Hide an element loaded from external url
I want to point out that these plugins aren't free at all. They're amazingly pricey. It's kind of gross that the logo remains.
I appreciate your help!
TL;DR: Need to stop a specific element from displaying on a WP plugin.

I do not give my opinion on the fact of hiding the logo or not, that's your business, but be sure you have the right.
You should add this CSS rule in your style.css file (or into your WP template settings page if there is a field like "write your own css here") :
.hc_footer img { display:none; }
The rule hides all the image elements which are on the footer of the timetable. Currently there is only the "powered-by" logo so it's OK.

Related

Edit existing items in a Wordpress theme

I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize

Linking paginated articles to sidebar

My google fu is currently letting me down so I thought I'd ask here for some help..
I have a page that has a single article on it (url.com/article/article-headline). When you scroll down the page using jQuery it loads the next article and changes the url (url.com/article/next-article-headline).
My issue is, I have a left hand sidebar which has a list of all the articles. What I'd like to happen is to have the current article highlighted. So when you scroll down the page and the next article loads the next sidebar article title is highlighted etc etc.
If you need an example of what I mean you can see it in action on time.com
http://time.com/4010146/smartphones-dinner/ (scroll down the page and watch the URL and sidebar)
I'm really struggling to find what it's called in order to do a proper search. I guess it's something similar to scrollspy but I'm not sure. Are there any plugins that exist for this?
You need to add data-attributes to your sidebar and the article section at the main content. With the help of which you could determine the article title.
Using jQuery then add a class named "active" which would determine the current article is active and style the "active" class later just for the sidebar.
Example: .sidebar-article.active { color: #f00; }
IF you need a solution you need to also provide appropriate HTML structure and jQuery code with the help of fiddle. So that rest of the code snippet we could provide and also not harm your current code base.

Dynamic Breadcrumbs using sections of page for hierarchy

Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.
I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.

changing active class in twitter bootstrap to the current page that user clicks on in the navigation bar

I am sure the answer to this question has been answered many times. In fact, I've been reading tons of threads regarding this question, but I still have no clue how to go about doing this. If you can help me with a very simple way of implementing the code, that would be awesome. I am a complete newbie at this, and have very little, if not, zero, knowledge of javascript.
I have a simple fixed navigation bar (of about 5 links) on the top of the site I'm currently building, using twitter bootstrap. This is a one-page scrollable website.
In twitter bootstrap, there is a class on the first link. This class is "active". It's there by default.
I'm assuming this is the key to highlighting the links when a user clicks on one of the links in the navbar, ie. when the user scrolls to a certain section on the 1-page website, the corresponding navigation link gets highlighted.
I think I need to add some javascript to get this working. Or maybe I can get this working without javascript?
What do I do? Please help...
If you can get an example up on jsfiddle, that would be great too.
What I need help with specifically:
1) I need to incorporate smooth-scrolling on the website (which I can kinda do, using something I've searched for online, but would prefer to have a complete solution to this including the points below).
2) When user scrolls down or up my 1-page website, the navigation links changes color, according to the section they're in.
3) When user clicks on one of these navigation links, the link remains highlighted while the user reads that section of my website.
4) If I need to use javascript, do I write the javascript at the bottom of my HTML code, above the body tag? Or should I create a new .js file?
5) I need to stress that I'm a complete newbie, and that I'm using the current version of twitter bootstrap.
Ok.
download http://flesler.blogspot.com/
download http://github.com/davist11/jQuery-One-Page-Nav
Call js
jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>
});
Add id="top-nav" to your nav

change icon on html page upon user action using css or javascript

I am quite a newbie web development having basic knowledge in HTML CSS and JavaScript. I have a small blog page, which allows users to upvote a title of a blogpost - similar to what SoF has on its questions.
So, the problem I am facing is that I am unsure how I should change the icon (which I have in a sprite) once the user has clicked on it. So, in a nut shell
(Page1) icon1.png --> User Clicks --> (Page1) icon2.png
where icon1.png and icon2.png are in my sprites.png
I think JS is the way to go for this - but I was wondering if it is (is doing some sort of AJAX the way to do it?)- any directions would be much appreciated.
Thanks.
$(function(){
$('#SELECTOR').click(function(){
$('#icon1').css('background-position','0px, 120px') //whtever bg position
});
})
You can use javascript as below.
On click set background image position.
document.getElementById('SELECTOR').style.backgroundPosition='0px 150px';
where SELECTOR is the element's ID on which you want to change image position
As per you said you have sprite image so you just need to set image position accordingly.

Categories