How can I override the appearance of embedded Javascript? - javascript

I'm redesigning a Squarespace site for a client who owns a cooking school. She uses an external booking site (Fareharbor) to manage her classes which are then embedded into the site using JavaScript widget. The embedded listings don't match the style of the rest of the site, which looks really unprofessional, so I want to update the styles to make them look better. I tried modifying it in the CSS stylesheet (both in page and for the whole site) and it did nothing (clearly the script takes priority). I've looked around and people have said there's a way to do it using JQuery or straight JavaScript, but while I'm pretty adept at following code instructions and have a little JS experience, I'm pretty new to this so I don't actually know where I would put whatever code I use to change it.
So my question is:
1) What is the best way to override the default appearance of the embedded script?
2) If the answer involves using JavaScript/JQuery to modify the appearance of the original script, how do I do that? (What is the code, and where do I put it).
The page I'm trying to modify is figcookingschool.com/classes (currently working on the first embed, with the pictures – assuming the answer to this will help me with the second!) and the code I was given to embed the JavaScript is:
<script src="https://fareharbor.com/embeds/script/items/figcookingschool/?full-items=yes&fallback=simple"></script>
One of the many things I want to do is change the border-radius to 0 on each box so if you want something to use as an example, that's a good one ;) Thanks in advance!!

Related

I want edit every single page in wordpress. Is possible?

Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/

Crawler4j, Jsoup and JavaScript: extract attribute values modified with JavaScript

I'm using a Crawler4j and Jsoup to crawl a website and it works fine for the HTML text, but there are some important contents, which default values are hard coded in CSS and then dynamically set with JavaScript.
For example, I have the
and I need the width value, which in CSS is hard coded as 10px, but modified in JavaScript to, let's say, 5px.
Is there a way to get this value without using another crawler? Or a simple alternative?
I have already quite a lot of code, so I don't want to rewrite everything if there is a possibility to do that with the Crawler4j.
I hope my question is clear enough and thank you in advance for your help!
This is not possible with crawler4j nor with jsoup. They both handle only static HTML content.
There are several open issues related dynamic JavaScript execution on the official GitHub Repository: #49, #197 and #220.
To achieve your objectives, you would need to build a stack based on Selenium, CasperJS and/or PhantomJS, which could then be used for advanced crawling including JavaScript execution.

Altering a page from another site

Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.

Show/Hide Column in a Spreadsheet-converted-to-HTML Page

I know that there are already a few answers regarding this subject, but I wanted to ask again, so that you can suggest the best option.
I have created a book that teaches (4 languages so far) at the same time. I will be selling various versions of this books travelling in Mexico. But it is also available online, free of charge. You can go directly to the version in question by visiting
http://jersllvs.majormigraine.com
I have created this book using the spreadsheet program in the OpenOffice suite (same as excel). Right now there are 4 columns for the 4 languages and as I am starting to work on language #5, I am realizing that I can save myself a lot of work, if I can hide/show the columns on the page. What I want to do is use the spreadsheet program to create the index.html for this book with all languages, and then add the needed code to the html file so that the user can check/uncheck the languages. There will be a list of languages at the top of the screen (English, Spanish, etc.) and each language will consist of 3 columns which will extend the entire length of the page.
I only have a limited knowledge of basic HTML, but have a long history working with computers, and can learn whatever is needed. However, as this entire project is to remain completely free (and I still have to get out and sell books to make a living), I want to find the easiest and fastest way to achieve this.
Thank You very much for your answer,
Jerry
I personally would use Jquery. However this could be pretty complicated if you arent too familiary with it. If you click the link I have provided below there is a short demonstration of what I think you are looking for. However because your webpage is so big, I think it could be very complicated for you as there is a lot of styling involved as well.
Take a look at the link I have made, and see if thats what you want. If yes, then you can slowly start to work out how to implement that into your site. To make Jquery work on your webpage you need to add the following code into the <head> tag of your HTML page.
<script type="text/JavaScript" src="http://code.jquery.com/jquery-latest.js"></script>
and then the Jquery code that you may use from my link will need to be within the <script> tags which will look like
<script type="text/javascript">YOUR CODE HERE</script>
I hope this is what your looking for. Here is the link to the page I have made for you: http://jsfiddle.net/3xR2p/1/

Simple lightbox feedback form? Included screenshot

There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.

Categories