Generating Rails Embed using data attribute - javascript

I would like to create a content feed using Rails that can be embedded into another person's site, but am trying to do so in a specific way.
I would like the embed code to look something like the following:
<script src="//domain.com/embed.js" type="text/javascript"></script>
<link href="//domain.com/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="content-feed" data-feed-id="someID"></ul>
Instead of having the parameter for the feed in the url like: http://domain.com/embed/1.js , then http://domain.com/embed/2.js for two separate feeds for example.
I have a couple reasons for this, such as it makes it easy to have one js and one css file/link for every user.
One of the problems I see is that I would like to be able to save changes to how the feed is generated for that specific content feed in the user's dashboard without re-embedding the code, such as different sources or layouts.
It'd very helpful if anyone could give general direction or tell me how I might go about this process. At the moment, the feeds are simply generated on a page within my web application and that is the only place they can be seen.

Related

Give memory address location as a link in href of html

I have a different problem I don't know whether my question makes any sense or not, but I would like to get clarified. Actually I have an Embedded device and I will be loading html webpages in the serial flash address location of my device. Those webpages include common css but individually written in each page.Now I want to make a common page for css and link it to each individual web page using link href. I would like to mention the address location(Hexadecimal address) of css file in serial flash using href in html file.
Can I specify like that ?
Will it link to the location of serial flash ?
will my css gets adopted to my webpages?
or can I do it using Javascript ?
If yes, how can I give the address location in href. Please anyone let me know. Thanks in advance.
No need to include the hexadecimal address location.
Create the folder you would like to use and place all your files there (html, css,etc). When you brows your index.html it will search from within the same folder and if your css-files are there it is enough with below link in HTML.
<link rel="stylesheet" href="index.css">
If you have created a subdirectory (called css) for your css files you need to add the href like this:
<link rel="stylesheet" href="css/index.css">
Regarding your specific questions:
Can I specify like that ?
See above answer.
Will it link to the location of serial flash ?
See above answer.
will my css gets adopted to my webpages?
If you mean if your HTML file will find your CSS file,
- yes, if you put the correct path. If you add it as above
it will be relative meaning that you do not have to know
nor write out the full path.
or can I do it using Javascript ?
You do not need Javascript for solving your issues.
If yes, how can I give the address location in href.
No need of Javascript, use relative path as described in above answers.

Demandforce appointment form, integration with Wordpress

I am developing a website for dentist friend. So far it's looking good, I am using Wordpress along with the enfold theme.
One of the requested features for this website is to include the DemandForce appointment form, so customers would be able to schedule their appointments inside the new website.
I visited Demand force and found that the way to include their contact form is by:
Copying the following CSS file into the header <link type="text/css" rel="stylesheet" href="//www.demandforce.com/widget/css/widget.css" /> Which I did by modifying header.php
Adding the following script into the body; <script type="text/javascript">
d3cp_bid = 'private'; // Business ID in DemandforceD3
//d3cp_appt_source = 'My Website'; //optional. See Instructions.
//d3cp_appt_returnpage = 'your_page_url'; // Optional. See Instructions.
//d3cp_appt_postdata = 'false'; // Optional. See Instructions.
</script>
<script src="//www.demandforced3.com/b/burlingamesmile/scheduler.widget" type="text/javascript"></script>
Which I also did simply by created a raw text field and inputing it.
The result of this can be seen here. As you probably notice the form is not correctly formatted and I don't really understand why. I checked the source code, and both the CSS file and the script are where they should, so I don't quite get the displaying issues.
Since I couldn't figure it out this way, I tried another idea. The actual reservation form is hosted here. The good thing about that form is that is actually responsive. So I created another page with the following:
<iframe src="https://www.demandforce.com/b/burlingamesmile/schedule" width="1000" height="1500"></iframe>. How this looks can be observed here
This behaves ok. But the frame size doesn't adjust well to different screen sizes (smartphone, tablet, etc.) I have looked into this one, but it doesn't do the trick.
At this moment I am running out of ideas, so any comments/help is greatly appreciated, as always.
Thanks so much everyone.
Try adding this to your custom CSS section of the theme:
iframe, object, embed {
max-width: 100%;
}
Worked for me, making the content within the iframe responsive.

Big Cartel - JQuery Upload/Location

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

Is it possible to hide include part in view source of html

I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.

Loading a page via Ajax into Div Best Practice?

I'm using the method below to load a remote page into a div I have on the page.
$('#result').load('www.myurl.com/results.html');
I'm curious, is it a bad practice to load an entirely formatted HTML page within another page? My concern is more towards loading css or additional javascript includes that might overwrite other elements on the primary page.
I haven't experienced any issues during my initial tests, I'm just not sure if this is the best practice.
To Clarify: If I have a primary page like so
<html>
<head>
<script src="jquery.js"></script>
<link href="mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="remoteContainer"></div>
<script>
$('#remoteContainer').load('www.myurl.com/results.html');
</script>
</body>
And results.html code that looks like this:
<html>
<head>
<script src="jquery.js"></script>
<link href="myResults.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>My Results Page</h1>
</header>
...
</body>
Will the CSS and JS overwrite each other,or will the pages function as 2-separate entities?
This will work fine and the browser will handle it properly. From the jQuery docs:
... browsers often filter elements from the document
such as <html>, <title>, or <head> elements. As a result, the elements
retrieved by .load() may not be exactly the same as if the document
were retrieved directly by the browser.
However, it's probably better practice to specify the element in the returned HTML that you want to insert:
$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');
Ok, so maybe I should have just taken a look at DevTools before I asked the question.
After reviewing the Element Inspector, I now see that (at least in Chrome) that the browser strips out the HTML, HEAD, and Body tags. It also removes the additional jquery include. However it does leave the
<script>my js functions here</script>
Although I understand that I can't trust that all browsers will be as efficient, at least now I have seen the light.
I agree that it 'should' work 'fine'. But consider the extra overhead you are creating that could be eliminated by returning only the content that you need from the server. You might be hitting the database to retrieve data that is rendered in the parts of the page that you are discarding. For example, you might have information about the user displayed at the top of every page. Or you might be looking up other information that goes into your page meta tags in the head. You probably have some type of server side templating going on to create these excess parts of the page. Then you are putting this excess content in a response, sending it over a wire, then asking the browser to parse it, create html elements out of it, then remove the parts that are not wanted for you.
This may not be a big deal. It depends on how much traffic you get, how much extra work the server is doing to render the full page, how much of a load the server is under, and how much time/money/man power you have versus how much it would take to be able to send a trimmed down response instead. If it's a small project, with light traffic, it might not be worth changing. But it's also probably an easy change to make. And since the question is about a best practice, I would say no, loading a full page to render just a portion of the page not a best practice. The best practice is to return just what you need from the server, and to use all of it to update the page. This could be pre-rendered HTML or it could be JSON, but that is another discussion altogether.
A trivial solution in PHP could be as simple as the following, using ?format=ajax in your query string:
<?php
$ajax = $_GET['format'] == 'ajax';
if (!$ajax) {
render_head_and_stuff();
}
render_results();
if (!$ajax) {
render_footer_and_stuff();
}

Categories