Get certain element from webpage as embed code - javascript

I would like to know if it's possible to rip the Meta Slider element from a WordPress post as an embed code to place on a different HTML file of different host?
Particular Page
The link above will be the exact source and the meta slider element there is the one I would like to have the embed code. Thanks in advance.

This is basically a WP wrapper for the FlexSlider jQuery plugin. Get it here: http://flexslider.woothemes.com/

Related

How to build a web widget with PHP, Java Script and give custom CSS controls to external sites?

I am trying to create a web widget that can be easily integrated into any website by just copying a small piece of code but most importantly give the user custom CSS controls like changing the font or button color, etc. My code consists of JavaScript and PHP. I tried to do this with <iframe> but it just copies the whole page with menu and footer. I couldn't find any solution on how to remove it. Please help, thank you.

embedding a page with some javascript on a tumblr post

I want to reproduce a simple, one page website with some javascript in a tumblr post (as a form of documentation for a project) but everytime I try to put the source html of the site into the tumblr form it ends up not loading at all inside the tumblr... Here's the page I'm trying to "embed" into tumblr: www.benenson.ae/recording.html
When I copy the html into the tumblr console, I'm fixing the path to the scripts at the top so that's not the problem..Am I missing some trick for getting this to work inside Tumblr?
I wasn't sure what support there was for iframes in tumblr, but it is possible, but you will need to add some styling to suit your needs:
I simply created a new post, selected the html tab and then put in the following code:
<iframe src="http://www.benenson.ae/recording.html"></iframe>
Alternatively you could create a single post, uploading the image content to tumblr and make it link to anywhere you like, and then add a caption for the post that replicates the current text you have.
If that helps or you want to pursue the second option, let me know and I can update my answer.

Load a html page in a div by clicking an image

I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).

develop a Custom HTML Slider for joomla

I'm new to web and its developing.I have HTML code and JS & CSS codes snippets i want to grab all these into one HTML page to Attach custom HTML page to Joomla. Please find below the link I followed.please help me. I need to use this kind of slider
Click here to see i want to use CSS,JS,HTML code
Try this,
Instead of creating a custom HTML page for slider you can create a banner module,then assign it to a proper menu , this way has several advantages and you can use it on multiple Joomla sites and easy to manage etc.
In this method you can manage images from banner manager and links ,clicks,impressions etc. An example Joomla banner slider can be download form here. If you have some experience in Joomla then it is very easy to make your slider from the example.
If you still want to use custom html create an article then assigne it to a proper page like home. Then use some Sourcer kind of plugin for adding script inside article editor.
Hope it make sense..

javascript code for embeding link with its details like in facebook

i want a javascript code which would fetch page contents like thumbnail images and contents and some text from the body as is shown in facebook when a link is shared .
please suggest me some technique or code for doing so
JQuery load would probably work for your purposes

Categories