I develope a webpart for sharepoint 2010 internet site that uses bxslider. when i use this web part in english pages it works while in arabic it renders the content but it flash and disappear when page load complete.
I use the following code:
<div style="text-align:right;margin-right:6px;height:255px;width:310px;border: 1px #B8B8B8 solid;background-color:#F3F3F4;" >
<div>
<div class="SpotTitle1">آخــر الاخــبار
<img id="go-next15" src="/_catalogs/masterpage/en-us/Preview Images/perv.png" width="20" height="18" align="left" />
<img id="go-prev15" src="/_catalogs/masterpage/en-us/Preview Images/next.png" width="20" height="18" align="left"/>
</div>
<div id="slider15" style="liststyle: none;padding:0 !important;">
<div id="News1" runat="server" class="TitleLink"></div>
<div id="News2" runat="server" class="TitleLink">
</div></div> </div></div>
and on sharepoin masterpage i use:
<script type="text/javascript"> $(function(){
var slider15 = $('#slider15').bxSlider({
controls: false
});
$('#go-prev15').click(function(){
slider15.goToPreviousSlide();
return false;
});
$('#go-next15').click(function(){
slider15.goToNextSlide();
return false;
});
});
</script>
any one have idea about what i can do to let it appear after page load.
perhaps the ( en-us ) in
src="/_catalogs/masterpage/en-us/Preview Images/perv.png"
try put the images in PublishingImages Folder
Related
I've written a webpart in Vue.js where the user can write a lot of information. When I tested the webpart in my SharePoint workbench it seemed to look fine.
However, when I deployed the .sppkg file to the SharePoint site, the size of the webpart changed and I couldn't click on Create or Cancel anymore.
If I change the height, I can't scroll down. Is there a way to fix this?
AddAthleticTestDialog: function() {
var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
var $this = this;
this.$modal.show(
AddAthleticTest,
{
text: SelectedPlayerID
},
{
draggable: true,
width: 1200,
height: 700
},
{
closed: function(event) {
$this.loadHistory(SelectedPlayerID);
}
}
);
},
Here's how it's shown in the workbench:
And here's how it's shown when I upload it on the webpage:
Here's a small part of the code:
<template>
<div class="container p-3">
<tbody>
<tr>
<th scope="row" style="width:200px; padding-left:0;padding-right:0">Antropo.</th>
</tr>
</tbody>
<div class="row">
<div class="col">
<label for="exampleInputAthletes">Athletes</label>
<input v-model="athleticsData.Athletes" type="text" class="form-control" id="Athletes" placeholder="Enter Athletes" />
</div>
<div class="col">
<label for="exampleInputTestingDay">Testing Day</label>
<input v-model="athleticsData.TestingDay" type="text" class="form-control" id="TestingDay" placeholder="Enter Testing Day" />
</div>
Just wondering if it is possible to synchronize Magnific pop-up with a slider(flexslider or slick, for example) so that when you change slide on Magnific pop-up the slider in the background also changes.
EDIT
$('.slick-slider').magnificPopup({
delegate: '.slides:not(.slick-cloned) a',
type: 'image',
mainClass: 'mfp-fade',
fixedContentPos: false,
removalDelay: 350,
pauseOnHover: false,
gallery:{
enabled: true,
tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
},
callbacks: {
beforeClose: function() {
$('.slick-slider').slick('slickGoTo', parseInt(this.index - 1));
// works better with the code bellow but sometimes gets stuck between 2 slides
$('.slick-slider').slick('slickGoTo', parseInt(this.index));
}
}
});
It's definitely possible. Here's an example using Slick.js.
Working Example
HTML
<div class="carousel">
<img src="//satyr.io/600x400/1" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/2" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/3" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/4" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/5" width="600" height="400" alt="" />
</div>
JS
$(document).ready(function() {
var $carousel = $('.carousel');
$carousel
.slick()
.magnificPopup({
type: 'image',
delegate: 'a:not(.slick-cloned)',
gallery: {
enabled: true
},
callbacks: {
open: function() {
var current = $carousel.slick('slickCurrentSlide');
$carousel.magnificPopup('goTo', current);
},
beforeClose: function() {
$carousel.slick('slickGoTo', parseInt(this.index));
}
}
});
});
Dependencies
Also, make sure you pull in the dependencies for jQuery, Slick, and Magnific Popup.
Update
Accounts for cloned item created by Slick
Updates Magnific Popup with current slide when opened via keyboard navigation
And if you have multiple .carousel instances you can do like this:
https://jsfiddle.net/9dyh2yjt/98/
$(function() {
$('.carousel').each(function() {
var gallery = $(this);
gallery
.slick()
.magnificPopup({
type: 'image',
delegate: 'a:not(.slick-cloned)',
gallery: {
enabled: true
},
callbacks: {
open: function() {
var current = gallery.slick('slickCurrentSlide');
console.log(current);
gallery.magnificPopup('goTo', current);
},
beforeClose: function() {
gallery.slick('slickGoTo', parseInt(this.index));
}
}
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="carousel">
<img src="//satyr.io/600x400/1" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/2" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/3" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/4" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/5" width="600" height="400" alt="" />
</div>
<div class="carousel">
<img src="//satyr.io/600x400/1" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/2" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/3" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/4" width="600" height="400" alt="" />
<img src="//satyr.io/600x400/5" width="600" height="400" alt="" />
</div>
Hey guys i'm having some problems with how to upload and save images using angularjs and flowjs.
I'm new to angularjs and had my problems trying to make an image upload but i got it working with ng-flow, still i'm having some problems trying to save the image to some designed path.
One exemple and similar problem is this one How and where save uploaded files with ng-flow? , but i still couldn't made it work.
Here's the code for the upload and preview, working fine so far so good:
<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}"
flow-name="image.flow" flow-files-submitted="$flow.upload()"
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
<div class="row" style="margin-top: 0px!important;">
<div class="col-sm-10">
<p><label for="image">ADD PHOTO</label></p>
<table style="border: 0px;">
<tr>
<td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;">
<div class="text-right">
<a class="glyphicon glyphicon-remove" ng-click="file.cancel()"
style="color:#ff4b4b; text-decoration: none!important;"></a>
</div>
<div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;">
<span class="helper"></span>
<img flow-img="file" src="" class="image-thumbnail">
</div>
<div class="progress progress-striped" ng-class="{active: file.isUploading()}">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}">
</div>
<span class="sr-only ng-binding">1% Complete</span>
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass">
<span class="file-upload btn btn-primary" flow-btn="">
Choose file
<input type="file" multiple="multiple" style="visibility: hidden; position: absolute;">
</span>
</div>
</div>
But here's the problem, i don't know how or what to do to create this image in some path...
I'm passing to ng-flow-init my webservice method as it will send via url parameters like this:
flow-init="{target:'../WebService/WebService.asmx/setImage'}"
and the ws receive it like the following example:
../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1
'flowChunkNumber=1
'flowChunkSize=1048576
'flowCurrentChunkSize=111168
'flowTotalSize = 111168
'flowIdentifier=111168-Figura1png
'flowFilename=Figura1.png
'flowRelativePath=Figura1.png
'flowTotalChunks = 1
What should i do with these informations or what do i need to send the data (binary, base64, etc) and save/create the image on my server?
Edit 1: I already know that i need the file data and figured that i do need an upload.php to transform and send the file.
Still can't even think about how to create an upload.php for vb.net
After a long time searching i decided to move forward and do with an entirely different way, i removed pretty much all my custom css and style to make it more clean to read.
Before anything i changed somethings like i'm not using ng-flow anymore, it's purely angularjs and javascript, and i'm encoding the file to Base64 and decoding it on my server side.
HTML:
<div class="row">
<div class="col-sm-10">
<table>
<tr>
<td ng-repeat="image in images">
<div>
<img id="imagePreview{{$index}}" src="#" alt="" />
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right">
<input type="file" id="img" />
<button ng-click="addImage()" type="button">ADD</button>
</div>
</div>
AngularJS Controller:
$scope.images = [];
//Don't let the same file to be added again
$scope.removeImage = function (index) {
$scope.images.splice(index, 1);
}
//Add new file to $scope.images
$scope.addImage = function () {
var
reader = new FileReader(),
$img = $("#img")[0],
index = $scope.images.length;
reader.onload = function (e) {
if ($scope.images.indexOf(e.target.result) > -1) return;
$scope.images.push(e.target.result);
if (!$scope.$$phase) $scope.$apply();
$("#imagePreview" + index).attr('src', e.target.result);
$scope.uploadImage(index);
}
reader.readAsDataURL($img.files[0]);
};
And here it is how to get the files converted to Base64:
$scope.uploadImage = function (index) {
var res = $scope.images[index];
//{...} Your code here, method call etc.
}
Suppose the following html code is present in web page
<td id="tdwords" colspan="2" class="inputWrap">
<label for="words">Search term</label><input type="text" name="words" value="" id="words" title="Search Crystallography Journals Online" />
</td>
How do I replace
id="tdwords"
with
id="tdset"
when a webpage is opened in my visual basic web browser?
You could use javascript I believe.
Example:
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
change_id();
});
function change_id() {
var ids = document.getElementsByClassName('inputwrap'),
i = ids.length;
while(i--) {
ids[i].setAttribute("id", "tdset") ;
}
}
<script>"
Just put this in the Head content and it should happen.
I'm trying to implement a Google Custom Search Engine into my website. So far, I've been able of changing my snippets layout, and show the variables Google shows in its examples:
http://googleajaxsearchapi.blogspot.com.es/2010/04/rendering-custom-data-in-custom-search.html
Well, in the examples, everything looks great, BECAUSE THEY KNOW THE VALUES THEY MAY PRINT. I mean, if you see this snippet:
<div id="mysite_thumbnail">
<div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/>
</a>
</div>
</div>
it's pretty clear that "Vars" is holding some data GSE is printing. My problem is that I don't know what "Vars" holds, and when developing my view I can't know if the value is there, and what is its name.
So, the question is: How can I print "Vars"? I suppose is a js variable you may obtain from the jsapi, but juss guessing, console.log() was not working for me, :(
Well, I finally found out how to post the data:
From Google Search Engine Api documentation:
https://developers.google.com/custom-search/docs/js/rendering?hl=es&csw=1#richsnip
You only have to add the following code in your snippet:
<span data-body="JSON.stringify(Vars)"></span>
So, you'll have something like:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// Load the Search API
google.load('search', '1');
// Set a callback to load the Custom Search Control when you page loads
google.setOnLoadCallback(
function(){
new google.search.CustomSearchControl('XXXXXXXXXXXXXXX').draw('cse');
google.search.Csedr.addOverride("mysite_");
},
true);
console.log(google);
</script>
<div style="display:none">
<div id="mysite_thumbnail">
//This will show all Vars content
<span data-body="JSON.stringify(Vars)"></span>
<div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/>
</a>
</div>
<div data-ifel="Vars.thumbnail == 0" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:'XXXXX.png', width:115, height: 90}"/>
</a>
</div>
</div>
<div id="mysite_webResult">
<div class="gs-webResult gs-result"
data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}">
<table>
<tr>
<td valign="top">
<div data-if="Vars.richSnippet" data-attr="0"
data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div>
</td>
<td valign="top">
<div class="gs-title">
<a class="gs-title" data-attr="{href:unescapedUrl,target:target}"
data-body="html(title)"></a>
</div>
<div class="gs-snippet" data-body="html(content)"></div>
</td>
</tr>
</table>
</div>
</div>
</div>